Styling Forms with CSS3
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 :enabled, :disabled and :checked pseudo-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.
For what it’s worth IE7 doesn’t support the attribute selector for ‘for’ attributes on label elements.
Just wondering why the hell Devo’s guys don’t provide a feed for their articles (or maybe just why it’s so hidden that I’m not able to find it)
There is a feed linked from the home page (both RSS 2.0 and Atom). It shows up for me in url field in Opera and Safari at least.
Thanks David, that’s true. IMO it could also make sense to have it linked at the article level (at the end, people is more likely to arrive directly to them instead of to the main page)
I’ll follow up with the DevO developers to see if they can add your request.
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!
Estilizar formularios con selectores y css3…
css3.info enlaza dos artículos de dev.opera donde explican cómo estilizar formularios mediante selectores de atributos (IE7, Opera, Safari y Firefox) y mediante el uso de CSS3…