CSS checkboxes & radio buttons when input is inside label?

Question

I\'ve searched extensively on here for an answer to this but haven\'t quite come across what I\'m looking for. Found this CSS - How to Style a Selected Radio Buttons Label? but

Answer 1

Unfortunately CSS doesn't allow the styling of parent elements based on child elements which would be the easy way example:

div.a < div { border: solid 3px red; }

The opposite of selecting a child based on parent:

div.a > div { border: solid 3px red; }

What you are wanting to do can be achieved using jQuery.

Check out this post.

Answer 2

If you can edit the markup to wrap the actual label text, for example:

<label>
    <input type="checkbox">
    <span>One</span>
</label>
<label>
    <input type="checkbox">
    <span>Two</span>
</label>
<label>
    <input type="checkbox" disabled>
    <span>Three</span>
</label>

You can pull off some tricks with CSS:

label {
    position:relative;   
    cursor:pointer;
}
label [type="checkbox"] {
    display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
    display:inline-block;
    padding:1em;
}
:checked + span {
    background:#0f0;
}
[type="checkbox"][disabled] + span {
    background:#f00;  
}​

Demo: http://jsfiddle.net/dMhDM/1/

Keep in mind that this will fail if the browser doesn't support :checked.

This is basically the same as the other solution, but the stying is done on the span rather than the label.

Answer 3

IMHO best way to do this without messing up with html by PURE CSS is

 input[type="checkbox"] {
     position: relative;
     cursor: pointer;
     padding: 0;
     margin-right: 10px;
}
 input[type="checkbox"]:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     margin-top: -2px;
     width: 20px;
     height: 20px;
     background: #fcfcfc;
     border: 1px solid #aaa;
     border-radius: 2px;
}
 input[type="checkbox"]:hover:before {
     background: #f5821f;
}
 input[type="checkbox"]:focus:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
 input[type="checkbox"]:checked:before {
     background: #f5821f;
     border-color: #f5821f;
}
 input[type="checkbox"]:disabled {
     color: #b8b8b8;
     cursor: auto;
}
 input[type="checkbox"]:disabled:before {
     box-shadow: none;
     background: #ffffd;
}
 input[type="checkbox"]:checked:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 8px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
}

Answer 4

Very interesting question. Truth be told, I'm pretty sure that's just not possible with CSS alone.

If there's some sort of pattern to the label's for attribute (ctrl_enable_rte), there's hope for you. For example, if all checkbox labels end with rte, you could use

label[for$=rte] { ... }

If there is no such pattern, and the checkbox IDs are chosen arbitrarily, you'll have to resort to JavaScript.