Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get a css pseudo element :checked to work in IE8 without Javascript?

I have two radio buttons, I need to set the background color on click. My code works in all browsers except for IE8. Is this possible to get this to work for IE8 without the use of Javascript?

<form>
    <input type="radio" id="m" name="gender" value="male">
    <label for="m">male</label>
    <input type="radio" id="f" name="gender" value="female">
    <label for="f">female</label>
</form>

input:checked + label{
    background:red;
}

http://jsfiddle.net/chrimbus/sXjyL/3/

like image 726
nthChild Avatar asked Jul 25 '13 22:07

nthChild


People also ask

How do I make checkboxes checked in CSS?

The :checked CSS pseudo-class selector represents any radio ( <input type="radio"> ), checkbox ( <input type="checkbox"> ), or option ( <option> in a <select> ) element that is checked or toggled to an on state.

How the CSS selector select the element that are checked?

The checked selector is used to select all checked elements in input tag and radio buttons. This selector is used with radio buttons, checkbox and option elements.

Are pseudo elements clickable?

The answer is no.


1 Answers

While IE8 understands adjacent sibling selectors, it doesn't understand the checked pseudo-element, so, unfortunately, you can't make your code IE8-friendly by using CSS only.

Take a look at Selectivizr or IE7.js for a JavaScript solution.

like image 113
Renato Avatar answered Nov 09 '22 07:11

Renato