How To Style Checkbox or Radio Button Using Only CSS

Unlike <select> tag, styling checkbox or radio button is one of those annoying jobs every web designer or web developer will have been tasked with at some point. There are many solutions on the internet, many of them work by adding extraneous markup, prefixes, image or javascript. But using those solutions doesn’t always give the look and feel that we want. So I go through lots of those solutions and find a simple one that doesn’t compromise the look and feel.So let’s get started!

Style Checkbox or Radio Button Using PURE CSS

This solution requires the following few modern browser features:

• ::before and ::after pseudo-elements
• :checked CSS pseudo-class selector
• + adjacent sibling selector

The HTML Markup For a Checkbox or a Radio Button

<!--CHECKBOX MARKUP -->
<input id="style-checkbox-1" type="checkbox" name="checkbox1" value="value1">
<label for="style-checkbox-1">Checkbox</label>

<!--RADIO MARKUP -->
<input id="style-radio-2" type="radio" name="radiobutton1" value="value2">
<label for="style-radio-2">Radio Button</label>

The Complete and PURE CSS

/*********
STYLE FOR A CHECKBOX --------------- */

input[type=checkbox] {
    position: absolute;
    opacity: 0;
}
input[type=checkbox] + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
input[type=checkbox] + label:before {
    border: 1px solid #bbbbbb;
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 22px;
    height: 22px;
    background: #e6e6e6;
    border-radius: 3px;
}
input[type=checkbox]:hover + label:before {
    background: #ccc;
}
input[type=checkbox]:checked + label:before {
    background: #5cb85c;
    border-color: #5cb85c;
}
input[type=checkbox]:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
input[type=checkbox]:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}
input[type=checkbox]:checked + label:after {
    content: '✓';
    color: #fff;
    top:0px;
    font-size: 20px;
    font-weight: bold;
    left: 4px;
    position: absolute;
}
/**********
STYLE FOR A RADIO BUTTON --------------- */

input[type=radio] {
    position: absolute;
    opacity: 0;
}
input[type=radio] + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
input[type=radio] + label:before {
    border: 1px solid #bbbbbb;
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 24px;
    height: 24px;
    background: #e6e6e6;
    border-radius: 50%;
}
input[type=radio]:hover + label:before {
    background: #ccc;
}
input[type=radio]:checked + label:before {
    background: #5cb85c;
    border-color: #5cb85c;
}
input[type=radio]:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
input[type=radio]:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}
input[type=radio]:checked + label:after {
    content: '●';
    color: #fff;
    top:0px;
    font-size: 20px;
    font-weight: bold;
    left: 6.5px;
    top: -0.5px;
    position: absolute;
}

That’s it! this little quick and easy CSS workaround will make it a whole lot easier to style a checkbox or a radio button.