For those of you that haven’t seen, Dev Opera has just published a two part article series on styling form controls, by Christopher Schmitt. The first part covers using attribute selectors (which work in IE7, Opera, Safari and Firefox) to slim down your markup by providing a way to identify certain form controls without the addition of a class value. An example of this is using
input[type="text"]in the CSS, rather than adding
class="text"to the HTML file. The second part takes this further, by taking advantage of the
:checkedpseudo-classes, and a dash of
opacity. The browser support for these pseudo-classes are not as strong however. According to Christopher, Opera is the only browser that supports all three correctly.
If you are not aware of Dev Opera (known lovingly as Devo internally at Opera), it is Opera’s new developer site. Look out for a fantastic article on CSS3 from CSS3.info’s very own Peter Gasston in the near future.
You can skip to the end and leave a response.
For what it’s worth IE7 doesn’t support the attribute selector for ‘for’ attributes on label elements.
Are all those br-tags there to make the example shorter CSS-wise, or do you actually make pages like that?
FTA: “The stepping further approach of coupling content auto-generation after the :disabledselector doesn’t work.”
Actually, the problem is that generated content doesn’t work at all with input elements. I can’t remember ever having problems with multiple selectors in Fx…
FTA: “Also, the coloring of the text from the :enabled CSS rule occurred only after I clicked on the form controls.”
That’s because you are styling the option element and not the select element!