How to change a checkbox's border style in CSS?

html

css-techniques

responsive-design

best-practices

byAlex Kataev·Dec 14, 2024

Customizing the border of a checkbox in CSS can be seamlessly done. Apply the border style to input[type="checkbox"] and ensure compatibility by resetting the browser defaults using the appearance property. Below is some code to get you started.

input[type="checkbox"] {
    border: 2px solid #009688; /* Fancy solid border (not edible, sorry) */
    -webkit-appearance: none; /* This keeps Chrome/Safari on leash */ 
    -moz-appearance: none; /* Tame Firefox's wild side */
    appearance: none; /* A standard remedy for checkbox madness */
    width: 20px; height: 20px; /* Size does matter in checkbox land */
    background: white; /* A clean slate for all your checkbox needs */
}
input[type="checkbox"]:checked {
    background: #009688; /* Change vest when checked */
}

CSS techniques for sexy checkboxes

Borders? Here, we use `outline`

Instead of border, using the outline property helps attain a more consistent presentation across various browsers.

input[type="checkbox"] {
    outline: 1px solid #1e5180; /* Solid outline akin to stealth mode */
}

Note the outline feature doesn't add any extra space, hence won't affect the layout.

`outline-offset` for an extra zing!

For more customization options, adjust the space between the checkbox and the outline using outline-offset.

input[type="checkbox"] {
    outline: 1px solid #1e5180;
    outline-offset: 2px; /* Space, the final frontier for checkboxes */
}

`box-shadow` to the rescue!

If outline falls short, box-shadow can impersonate a border, offering more flexibility and compatibility.

input[type="checkbox"] {
    box-shadow: 0px 0px 0px 1px rgba(255,0,0,1); /* Red alert! I'm imitating a border */
}

Clear the default runway

For the styles to land smoothly, clear the default runway using vendor prefixes.

input[type="checkbox"] {
    -webkit-appearance: none; /* Chrome/Safari will thank you */
    -moz-appearance: none; /* Keep Firefox from being foxy */
    appearance: none; /* Standard syntax for other field trips */
}

Pseudo-Elements and icon fonts (because, why not?)

Use ::before and ::after pseudo-elements with FontAwesome for a richer styling experience.

input[type="checkbox"]::before {
    content: '\f00c'; /* FontAwesome check icon appears, tada! */
    /* Sprinkle additional styling here */
}

Differentiate between unchecked and checked states using CSS to achieve seamless state transitions.

Unleashing the might of JavaScript

CSS has its limits, and that's where JavaScript strides in. Create fully custom checkbox styles with JavaScript adding classes or styles dynamically for a truly unique user experience.

Test, test, test!

Consistency is key. Test your custom checkbox styles across different browsers. You'll be surprised how much fun these notorious little boxes could be!