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

This post was last updated on June 4th, 2021 at 04:14 pm

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

3 Comments

You can post comments in this post.


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

    Jim 6 years 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 6 years ago Reply


  • Thank for sharing.
    A very useful article,
    And thanks for coding.

    Devi Susanti 6 years ago Reply


Leave A Reply