Een alternatief form-element: checkbox

Een checkbox, leuk ding, handig vooral, maar qua layout niet echt een prachtexemplaar.

Er bestaan veel javascripts die een checkbox omvormen tot iets toonbaars. Mijn oplossing heeft geen javascript nodig, alleen css. Dus ook het checken en unchecken van de checkbox werkt helemaal op de ‘natuurlijke’ manier.

In deze post ga ik dus dieper in op de mogelijkheid om een mooiere checkbox te maken die past bij jouw website.
Qua code kost het iets meer dan het plaatsen van een normale checkbox, maar het eindresultaat is wat mij betreft belangrijker.

Een checkbox, een klein vierkant ding met een vinkje erin.

HTML:

<input class="input-field" checked="checked" name="my-checkbox" type="checkbox" />

Dat kan ook worden:

HTML:

<label class="input-field _checkbox">
    <input class="input-field" checked="checked" name="my-checkbox" type="checkbox" />
    <span class="_checkbox"></span>
</label>

Zoals je ziet kan je er van alles gedaan worden om een mooie checkbox te maken.
De grap zit ‘m in de

HTML:

<label class="input-field _checkbox">
    <input class="input-field" checked="checked" name="my-checkbox" type="checkbox" />
    <span class="_checkbox"></span> Dit is een label
</label>

CSS:

.input-field._checkbox {
   background: none repeat scroll 0 0 #FFFFFF;
   color: #6FAD55;
   margin-right: 0.5em;
   display: inline-block;
   position: relative;
   vertical-align: middle;
   border: none;
   padding: .5em 0;
   width: auto;
   height: 2em;
   line-height: 1em;
}
.input-field._checkbox [type="checkbox"] ,
.input-field._radio [type="radio"] {
   position: absolute;
   visibility: hidden;
}
.input-field ._checkbox {
   display: inline-block;
   width: 1em;
   height: 1em;
   border: 1px solid #999;
   vertical-align: top;
   cursor: pointer;
   border-radius: .2em;
}
.input-field [type="checkbox"]:checked + input + ._checkbox:after,
.input-field [type="checkbox"]:checked + ._checkbox:after,
.input-field ._checkbox._checked:after {
   color: #000;
   content: "✔";
   font-size: 1.4em;
   font-weight: normal;
   left: 0;
   line-height: 140%;
   position: absolute;
   text-align: center;
   top: 0;
   width: 0.8em;
}

Speak Your Mind

*