How To Style Checkbox or Radio Button Using Only CSS

Style Checkbox or Radio Button Using Only CSS 800x249 - 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:

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>
Important to note is that the <label> MUST directly follow the <input>, otherwise our :checked pseudo-selector won’t work.

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.

About This Author

My name is Parameshwar Roy (P. Roy), and I am a web developer. This is my personal blog to record my own thoughts. Though I am not a natural writer, I love to share my experiences. Hope my experiences will be useful to you…read more about me

2 Comments

You can post comments in this post.


  • I like your work 🙂
    What about un-checking the radio button?
    Thanks

    Jim 2 weeks ago Reply


  • Thank you for this! Design looks great. Not sure if I’m missing something but I can’t seem to uncheck my check boxes. Does this remove that functionality?

    Sam 1 week ago Reply


Leave A Reply