CSS Labeled Checkbox

Creating a checkbox with checked or unchecked custom label, built only with a little Html & CSS3 code. Check the demo page in the Zip for more information.


CSS Labeled Checkbox


How to use it:

Include labeled-checkbox.css in the head section of your web page.

<link rel="stylesheet" href="styles/labeled-checkbox.css" type="text/css" media="screen" charset="utf-8" />

Create the html for the labeled checkbox.

<input class="labeled-checkbox" type="checkbox" id="labeled-checkbox"/>
<label for="labeled-checkbox"> <span class="labeled-checkbox-unchecked">No, do not remember me.</span> <span class="labeled-checkbox-checked">Remember me, next time!</span> </label>

Style your checkbox in the CSS.

Leave a Reply

Don’t miss out on the latest freebies!

Sign up for my newsletter to receive the latest freebies from the design world. No spam, we promise!