How can I style an HTML checkbox's text? - html

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;
}

Answer 2

First, mark up the text correctly. You have a label for the input, use a label element.
<input type=checkbox id=myCheckbox> <label for=myCheckbox> Click moi! </label>
Then, make the assumption that the label for a checkbox will always immediately follow that checkbox in the markup and use the adjacent sibling combinator:
input[type="checkbox"] + label {
}

Answer 3

The <input> tag does not have an end tag - it's a self-closing tag. So the text next to it is not part of it. You need to style the text separately as its own element, like a <label>, for instance.

Answer 4

One good idea is to use a <span> tag:
<style>
#cb_span{color:green;}
</style>
<input type="checkbox"><span id="cb_span">Click moi!</span>

Answer 5

This text is not the part of the checkbox. It's the normal floating text and it belongs to its container (which is also checkbox's container). If you have your chackbox + text pair wrapped in some container e.g.
<div id="container">
<input type="checkbox">Click moi!
</div>
then you can add such CSS
#container {
color:green;
font-family: Consolas, Baskerville, 'Segoe UI', sans-serif;
}

Answer 6

The text itself isn't part of the input element.
By instead placing the text in an HTML element and using a bit of CSS trickery, we can change the text like in the included fiddle:
http://jsfiddle.net/QRBEx/8/

Answer 7

The text needs to be in a label. create a label for the checkbox.
i hope this helps