accessibility

Imageless Custom Checkboxes and Radio Buttons with CSS3: Revisited

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’ve always been interested in techniques for adding custom look and feel to form elements, and through the years I’ve offered a number of such solutions. In today’s post I will share my latest insight in check box and radio button styling, which is an improved version of another technique I’ve offered sometime ago, but this time with a fallback for non-CSS3 browsers and more elegant looks and code.

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

The CSS

As you can see, I am using the CSS3 :root element, which is ignored by non-CSS3 browsers, so they will display the normal check boxes and radios. The code listing below contains only official CSS properties, so maybe it’s a good idea to download the cross-browser solution from this link.

:root .css3-radios label,
:root .css3-radios input[type="radio"] + span,
:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes label,
:root .css3-checkboxes input[type="checkbox"] + span,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}

:root .css3-radios,
:root .css3-checkboxes
{
    position: relative;
}

:root .css3-radios label *,
:root .css3-checkboxes label *
{
    cursor: pointer;
}

:root .css3-radios input[type="radio"],
:root .css3-checkboxes input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}

:root .css3-radios input[type="radio"] + span,
:root .css3-checkboxes input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}

:root .css3-radios label:hover span::before,
:root .css3-checkboxes label:hover span::before
{
    box-shadow: 0 0 2px #ccc;
}

:root .css3-radios label:hover span,
:root .css3-checkboxes label:hover span
{
    color: #000;
}

:root .css3-radios input[type="radio"] + span::before,
:root .css3-checkboxes input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    border-radius: 100%;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

:root .css3-radios input[type="radio"]:checked + span::before,
:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    color: #666;
}

:root .css3-radios input[type="radio"]:disabled + span,
:root .css3-checkboxes input[type="checkbox"]:disabled + span
{
    cursor: default;
    opacity: .4;
}

:root .css3-checkboxes input[type="checkbox"] + span::before
{
    border-radius: 2px;
}

:root .css3-radios input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 24px;
}

:root .css3-checkboxes input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}

The Markup

Nothing fancy here, just a regular semantic form without any additional markup, supporting natively keyboard navigation and accessibility intact.

<!-- markup for custom radio buttons -->
<ul class="css3-radios">
    <li><label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label></li>
    <li><label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label></li>
</ul>
<!-- / markup for custom radio buttons -->
<!-- markup for custom check boxes -->
<ul class="css3-checkboxes">
    <li><label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label></li>
    <li><label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label></li>
</ul>
<!-- / markup for custom check boxes -->

What do you Think?

If you like the solution, you can try the demo or get it from this link. In case you are interested in other stuff I do, you can follow me on Twitter, visit my personal website or check my Web UI components.

Have a great weekend!

Related Posts

Page Accessibility Evaluation Tool from Acid.JS

ACC.Checker.JS is a free tool designed to evaluate page markup and help you identify accessibility errors. According to the selected options and stringness, ACC.Checker.JS will look for missing alt attrbiutes on <img /> tags, title attributes on anchors and accesskeys. The tool will also check if your readiobuttons or checkboxes are supplied with label tags and if the fieldsets in your forms are described with a legend.

ACC.Checker.JS has two modes of operation – automatic (when page loads) or manual (upon user click action). The manual mode can be used to detect accessibility flaws on markup generated on the client with JavaScript, after AJAX, DOM changes and actually any modifications to the source code after page load.

When evaluation is finished, ACC.Checker.JS displays the report in a convenient Web 2.0 way and provides link with additional information about every accessibility error it has encountered.

List of Detected Common Accessibility Errors

  • Missing or empty alt attribute on images.
  • Missing or empty title attribute for links and button elements.
  • Missing label tags for radio buttons and checkboxes.
  • Missing legend tags for fieldsets.
  • Missing summary attribute on tables.
  • Missing or empty title element on the page.
  • Missing or empty accesskey attribute for button elements.
  • Obtrusive JavaScript event handlers (onclick, onmouseover, etc) in markup.

View ACC.Checker.JS demo or download it. The tool is also included in the latest version of Acid.JS Web 2.0 Component Library. User’s manual and help is available on this page.