Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Checkbox styling

Checkbox styling

Problem

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?

Problem courtesy of: Pavel

Solution

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

Something like this

html


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/

Solution courtesy of: Gaby aka G. Petrioli

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Checkbox styling

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×