ifabio.lifestream

Custom checkbox and radio buttons using CSS

February 24 2010, 3:32am

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: PLAIN TEXT CSS:

p:not(#foo)> input + label:before

{

    position: absolute;

    z-index: 2;

    left: 16px;

    content: url(radio_normal.png);

    width: 16px;

    height: 16px;

    margin: 0 3px 0 -16px;

}

p:not(#foo)> input[type=radio]:checked + label:after {

    content: url(radio_checked.png);

}

input[type=radio]:hover + label:after,

input[type=radio]:focus + label:after {

    content: url(radio_normal_hover.png);

}

input[type=radio]:hover:checked + label:after,

input[type=radio]:focus:checked + label:after {

    content: url(radio_checked_hover.png);

}

input[type=radio]:hover:disabled + label:after,

input[type=radio]:focus:disabled + label:after {

    content: url(radio_normal_hover_disabled.png);

}

input[type=radio]:hover:checked:disabled + label:after,

input[type=radio]:focus:checked:disabled + label:after {

    content: url(radio_checked_hover_disabled.png);

}

input[type=radio]:active + label:before {

    content: url(radio_normal_active.png);

}

input[type=radio]:active:checked + label:before {

    content: url(radio_checked_active.png);

}

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.