CSS - How to Style a Selected Radio Buttons Label?

Posted by AnApprentice on Stack Overflow See other posts from Stack Overflow or by AnApprentice
Published on 2011-01-09T21:00:16Z Indexed on 2011/01/09 21:53 UTC
Read the original article Hit count: 221

Filed under:
|
|

Hello, I want to add a style to a radio button's selected label:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}

Any ideas what I'm doing wrong?

© Stack Overflow or respective owner

Related posts about html

Related posts about css