How to Add a Highlight Effect to Checked Input Field

Published December 21, 2016 by CSS Newbies.

This tutorial shows you an easy way to add a highlight effect to an input field that has been checked by the user. Not only is this a cool and different way to add some style to your sites, but it also improves user experience by making it pretty impossible for the user to accidentally check something they didn’t mean to.

Assuming your HTML looks something like this with an input field and a label tag:

<input id="checkbox1" type="checkbox" />
<label for="checkbox1">Checkbox Label Text</label>

Then your CSS to add a highlighted effect to the label of any checkbox input that’s been checked should look like this:

input:checked + label{
 background: #e7f478; 
}

Screen Shot 2016-12-17 at 11.18.34 AM

As always, your choice of color that you use for the highlight effect is completely up to you, and this code can be customized completely to your liking.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>