I am trying to style some form labels by selecting them with their ‘for’ attribute. But nothing is being picked up when I preview it in IE7. I’m doing this because I’d like to style them differently to each other, without adding to the existing markup.
So if my css looks like the following, I get nothing:
<style> label[for='foo'] { background: blue; padding: 1em } </style> <form> <label for='foo'/>bar</label> <input name='foo' type='text'/> </form> But if I change it to this, the styling works.
<style> label[fro='foo'] { background: blue; padding: 1em } </style> <form> <label fro='foo'/>bar</label> <input name='foo' type='text'/> </form> Have you seen this kind of problem before? Is there a problem with the way I’m writing the CSS, IE7, or something else?
This user seems to have had the same problem you are having: here
He says that because "for" is a reserved word, it can’t be used as a property name. But ‘htmlFor’ is the DOM property name associated with the for attribute