Egyedi kinézetű checkbox és radio button készítése

Szerző:   |   2016-02-21

A custom select után, itt a custom radio és custom checkbox is.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<input id="c1" type="checkbox">
<label for="c1">
	<span class="outer"></span>
	<span class="text">option 1</span>
</label>

<input id="c2" type="checkbox">
<label for="c2">
	<span class="outer"></span>
	<span class="text">option 2</span>
</label>


<br><br>

<input id="r1" type="radio" name="r">
<label for="r1">
	<span class="outer"><span></span></span>
	<span class="text">option 1</span>
</label>

<input id="r2" type="radio" name="r">
<label for="r2">
	<span class="outer"><span></span></span>
	<span class="text">option 2</span>
</label>

CSS forráskód


input[type="checkbox"],
input[type="radio"] { display:none }

input[type="checkbox"] + label,
input[type="radio"] + label { margin-right:30px; cursor:pointer }

input[type="checkbox"] + label .outer,
input[type="radio"] + label .outer {
	display:inline-block;
	width:20px;
	height:20px;
	border:1px solid #607d8b;
	background:#fff;
	box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
	vertical-align:middle;
	margin-right:10px
}
input[type="radio"] + label .outer {
	border-radius:50%
}

input[type="checkbox"]:checked + label .outer:before {
	content:'';
	display:block;
	width:19px;
	height:19px;
	background:center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMTQuMiAxMS4zIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNC4yIDExLjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzY2NjY2NiIgZD0iTTQuOSw3LjFDNy4zLDQuNyw5LjcsMi4zLDEyLDBjMC43LDAuNywxLjUsMS41LDIuMiwyLjEKCUMxMS4xLDUuMiw4LDguMyw0LjksMTEuM0MzLjMsOS43LDEuNiw4LjEsMCw2LjVjMC43LTAuNywxLjQtMS40LDIuMi0yLjFDMy4xLDUuMiw0LDYuMSw0LjksNy4xeiIvPgo8L3N2Zz4=)
}

input[type="radio"]:checked + label .outer span {
	width:12px;
	height:12px;
	display:block;
	border-radius:6px;
	background:#656565;
	margin:4px 0 0 4px
}

3 hozzászólás

  1. 2016. augusztus 5. péntek - 15:28

    Szia! Minden videód nagyon hasznos, érthető, nagy-nagy köszönet érte!
    Ebből a sorból már csak egy egyedi kinézetű fájl feltöltő hiányzik. 🙂

  2. 2016. február 22. hétfő - 20:59

    Ez nagyon tuti. Van amúgy még egy hasonló dolog amihez nem nagyon találtam css megoldást, az pedig a scroll csuszka pl. ami az őszi web oldaladon is raktál ha túl hosszú a szöveg.

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Sokat segitettel egy abszolut hozzanemertonek! Koszonom...

  • Névjegykártya tervezés Illustratorban

    Nem, mert megmondod, hogy kétoldalas nyomtatást kérsz. A nyomda nem csinál semmit amíg minden pontosan le nincs egyeztetve....

  • Névjegykártya tervezés Illustratorban

    Szia! Ha csinálok 2 ardboardot, egyikre a kártya elejét, a másikra a hátulját csinálom meg, és elmentem őket egy nyomdakész kétoldalas PDF-be, azt tud...

  • A villanyszerelés örömei panelben

    Mi is panelben szeretnénk az elektromos hálózatot cserélni, felújítani. Sokat segítettél, köszönjük. Üdv. József...

  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...