How can I style an HTML checkbox's text?

Question

With this input checkbox:

<input type="checkbox">Click moi!

...and this CSS:

input[type=checkbox] {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}

...the hover bit works fine (the checkbox itself changes), but the color / font of the text ("Click moi!") is not affected by setting color and font-family.

jsfiddle: http://jsfiddle.net/QRBEx/

How can I affect the text attributes via CSS?

Answer 1

The text should be within a label. Add a for attribute to attach it to the checkbox too.

jsFiddle example - it works.

<input id="checkbox" type="checkbox"/><label for="checkbox">Click me</label>

Then change the CSS:

label {
    color:green;
    font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

input[type=checkbox]:hover {
    box-shadow:0px 0px 10px #1300ff;
}