I've been attempting to add a style to the label for a radio button with the CHECKED attribute, but so far all my attempts have failed to match on IE7.
For example, I have created a JSFiddle here: JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
/* Ensuring that + selectors work */
input + span { color: blue; }
/* Attempting [checked] alone */
input[checked] + span { color: red; }
/* Trying to select by value */
input[checked="checked"] + span { color: green; }
</style>
</head>
<body>
<form>
<input type="radio" checked="checked" name="x" /><span>One</span>
<input type="radio" name="x" /><span>Two</span>
<input type="radio" name="x" /><span>Three</span>
</form>
</body>
</html>
All text in the SPAN elements is blue, however, the first one does not turn red or green in IE7 (both native and emulated in IE11). Should I resort to JavaScript workarounds, or is there a CSS trick that could make this function properly?