Wednesday, February 24th, 2010
Custom checkbox and radio buttons using CSS
Category: CSS
In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.
Ryan "the CSS Ninja" goes from here to explain his quest which includes fun CSS such as:
-
-
p:not(#foo)> input + label:before
-
{
-
background: url(gr_custom-inputs.png) 0 -1px no-repeat;
-
position: absolute;
-
z-index: 2;
-
left: 16px;
-
content: " 0a0 0a0 0a0"; /* 3x */
-
overflow: hidden;
-
width: 16px;
-
height: 16px;
-
margin: 0 3px 0 -16px;
-
}
-
-
p:not(#foo)> input[type=radio]:checked + label:before {
-
background-position: -32px -73px;
-
}
-
-
input[type=radio]:hover + label:before,
-
input[type=radio]:focus + label:before {
-
background-position: -32px -19px;
-
}
-
input[type=radio]:hover:checked + label:before,
-
input[type=radio]:focus:checked + label:before {
-
background-position: -32px -91px;
-
}
-
input[type=radio]:hover:disabled + label:before,
-
input[type=radio]:focus:disabled + label:before {
-
background-position: -32px -55px;
-
}
-
input[type=radio]:hover:disabled:checked + label:before,
-
input[type=radio]:focus:disabled:checked + label:before {
-
background-position: -32px -127px;
-
}
-
input[type=radio]:active + label:before {
-
background-position: -32px -37px;
-
}
-
input[type=radio]:active:checked + label:before {
-
background-position: -32px -109px;
-
}
-
He also reminded me of pointer events:
The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go "through" an element and target whatever is "underneath" that element instead.
There is a lot of Ninja in this one. Nice job.
Related Content:
- Execute code when a radio button or checkbox is selected
At times it can be useful to execute some code when a radio button or checkbox is selected.... - Checkbox horizontal alignment problem with multiple columns
4 rating from 72 votes
Ouch. That’s hardcore CSS.
Btw, you’ve got a weird overflow on the left side of your code box – the numbers are getting chopped off.
Once again the thorn in the side (IE) of most commercial web developers ruins the party
Regarding what Skilldrick said:
This overflow can be fixed by changing the padding-left value of the rule
#maincontent ol {… }
from 20px to 30px
Regards, NicBright
Exploration and experimentation are awesome, nice work! Don’t listen to the developers that would rather climb into the coffin that IE7 and IE6 have prepared for them.
PS: You guys really should add the link to the source in the article.
No wonder I didn’t realise my article got on here, no link love. Thanks ck2 for posting the link.
…And must of been in their queue for a while, article has since been updated to use a single sprite image.
check out these custom css3 forms. Webkit browser needed!
it removed my link. anyway here it is: demo.iwebkit.net/form.html