Can't get :checked pseudo-class to work

This is doing my nut in - I can’t get the :checked pseudo-class working

This is the form that I’m using:

<form>
<fieldset>
<legend>What type of pets do you have?</legend>
<label for="cat">cat </label>
<input type="checkbox" name="pet" value="" id="cat"/>
<label for="dog">dog </label>
<input type="checkbox" name="pet" value="" id="dog" />
<label for="rabbit">rabbit</label>
<input type="checkbox" name="pet" value="" id="rabbit" checked="checked" />
</fieldset>
</form>

And these are the two pieces of CSS I’m playing around with:

input[type=”checkbox”]:checked {
background : #ffffcc;
margin-left : 15px;
}

Or

form:checked {
background : #ffffcc;
margin-left : 15px;
}

Does anybody have any idea what I’m doing wrong?

Using a CSS 3 selector in a browser version that doesn’t support it yet? The only browser I can find that supports it is Opera. Neither Firefox or Chrome recognise those selectors.

Also you have the wrong sort of " around the word checkbox.

It’s actually working in all the browsers that we listed in the reference.:slight_smile: (assuming you use the correct quote marks)

The problem is that you can’t change the background colour of a check box in those browsers (you can change the background in IE but it doesn’t support the :checked property)

Do multiple attribute selectors have better support?


input[type="checkbox"][checked="checked"] {

}

Yes that would allow IE8 to play as well - good catch :slight_smile:

Although we found attribute selectors to be pretty buggy for some things.