Checkbox styling

Question

Is there a way to style a checkbox and a label with border, so the user can see only the label (the checkbox is hidden), and when the user clicks on the label, the label will change the color of the background and the text? This click should also work as clicking on the checkbox. If there is a way, how should I do this?

or

How to hide the checkbox and leave only the label do the work with changing colors?

Didn't exactly understand what you were trying to do, but it seems it can easily be done using javascript. Please explain yourself clearer so I can help you. — OriShuss
– OriShuss, Commented Sep 24, 2013 at 23:38
@Pavel, Updated version of accepted answer, you may like it. — The Alpha
– The Alpha, Commented Sep 25, 2013 at 0:02
You can use a plugin like prettycheckboxes or design your own here (it's a cross-browser css checkbox generator and easy to generate) and then download the generated code or build one from the scratch using the help of this article. — The Alpha
– The Alpha, Commented Sep 25, 2013 at 0:07

Gabriele Petrioli · Accepted Answer · 2013-09-24 23:42:11Z

5

Put them side to side (in html structure) and use the adjacent sibling selector +

Something like this

html

<input type="checkbox" id="box1" />
<label for="box1">checkbox #1</label>

css

input[type="checkbox"]{
    position:absolute;
    visibility:hidden;
    z-index:-1;
}
input[type="checkbox"]:checked + label{
    color:red;
}

you could style the label (2nd rule) as you want of course..

demo at http://jsfiddle.net/kb67J/1/

answered Sep 24, 2013 at 23:42

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The Alpha Over a year ago

+1, really nice work, i think it's also possible to use background images on label and changing the image on checked.

The Alpha Over a year ago

Just a modified version of this answer, I really like the idea, thanks man :-)

Felix Hagspiel Over a year ago

I wrote a more in-depth tutorial about how to customize checkboxes and radios, as well as create on/off switches if you want to learn it in more detail

Collectives™ on Stack Overflow

Checkbox styling

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related