Simple customization of Checkbox and Radio

Instead of intro

Good day to all!

Customizing form elements is probably one of the most exciting activities in Web design. Whether this exercise is justified everyone decides for himself, although it is obvious that in our time designers and layout designers still devote their time and energy to this.

Unfortunately, CSS alone is often not enough to easily decorate a particular form element. Probably why many people use pieces like Uniform for their forms. Personally, I always try to reduce the number of Javascript used for such purposes, so I want to tell you about the completely native HTML + CSS method of customizing radio buttons and checkboxes.
')
I am sure that most of the specialists at Habré use similar methods for those who use js-libraries, like Uniform , I hope this article will be useful.

Go!

So, we set the goal right away: to arrange checkboxes and radio buttons so that they look like Uniform js-magic, but to make it as simple as possible, native to HTML and CSS , and to avoid using extra tags, keeping the semantics. Something like this.

The main idea is based on the native “ability” of the HTML label tag to link to a specific form element. Actually and everything, further only the code.

Markup

< ul >
< li >
< input id = "cfirst" type = "checkbox" name = "first" checked hidden / >
< label for = "cfirst" > Checked checkbox < / label >
< / li >
< li >
< input id = "csecond" type = "checkbox" name = "second" hidden / >
< label for = "csecond" > Unchecked checkbox < / label >
< / li >
< li >
< input id = "cthird" type = "checkbox" name = "third" hidden disabled / >
< label for = "cthird" > Disabled checkbox < / label >
< / li >
< li >
< input id = "clast" type = "checkbox" name = "last" checked hidden / disabled
< label for = "clast" > Disabled checked checkbox < / label >
< / li >
< / ul >
< ul >
< li >
< input id = "rfirst" type = "radio" name = "radio" checked hidden / >
< label for = "rfirst" > Checked radio < / label >
< / li >
< li >
< input id = "rsecond" type = "radio" name = "radio" hidden / >
< label for = "rsecond" > Unchecked radio < / label >
< / li >
< li >
< input id = "rthird" type = "radio" name = "radio" hidden disabled / >
< label for = "rthird" > Disabled radio < / label >
< / li >
< / ul >

Absolutely native markup. Using label along with input is just like from textbooks. The only important thing is that you need to specify an id for each input and for for a label in order to link them.

I think everyone noticed the use of the hidden attribute, which hides the input elements themselves; however, due to the connection with the label , we can still manipulate them. As a result, we get something like:


It has become completely boring, but everything works. It now remains to arrange all this good as it should. To do this, use the sprite that is used on the Uniform website.

Registration

input [ type = "checkbox" ] ,
input [ type = "radio" ] {
display : none ;
}
input [ type = "checkbox" ] + label ,
input [ type = "radio" ] + label {
font : 18px bold ;
color : # 444 ;
cursor : pointer ;
}
input [ type = "checkbox" ] + label :: before ,
input [ type = "radio" ] + label :: before {
content : "" ;
display : inline- block ;
height : 18px ;
width : 18px ;
margin : 0 5px 0 0 ;
background-image : url ( uniformjs.com/images/sprite.png ) ;
background-repeat : no-repeat ;
}
input [ type = "checkbox" ] + label :: before {
background-position : -38px -260px ;
}
input [ type = "radio" ] + label :: before {
background-position : 0px -279px ;
}
input [ type = "checkbox" ] : checked + label :: before {
background-position : -114px -260px ;
}
input [ type = "radio" ] : checked + label :: before {
background-position : -108px -279px ;
}
input [ type = "checkbox" ] : disabled + label :: before {
background-position : -152px -260px ;
}
input [ type = "checkbox" ] : checked : disabled + label :: before {
background-position : -171px -260px ;
}
input [ type = "radio" ] : disabled + label :: before {
background-position : -144px -279px ;
}
input [ type = "radio" ] : checked : disabled + label :: before {
background-position : -162px -279px ;
}

It's still as simple as possible. We use the pseudo-element before to show our “virtual controls” and the user did not notice the substitution. Parts of the sprite, change depending on the state of the input a.

As a result, we get something like:



Demo

The benefit of using this approach compared with the same Uniform is obvious. No javascript for decoration, no extra tags, more simple, correct and semantic markup. The same method can be used to make these elements more bizarre. For example, you can easily patch up iPhone-style checkboxes without using javascript.

I hope the article will be useful for beginner makers and will stop them about using js crutches for such purposes. Thanks for attention!

UPD: As noted by the respected SelenIT2, this method probably will not work in the Safari browser under the iOS platform due to an annoying error in supporting the html specification ( link ).