-
200713 Dec
Posted in Tutorials
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 addingclass="text"to the HTML file. The second part takes this further, by taking advantage of the:enabled,:disabledand:checkedpseudo-classes, and a dash ofopacity. 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.
-
Comments
-
01.
For what it’s worth IE7 doesn’t support the attribute selector for ‘for’ attributes on label elements.
-
02.
Carlos says:Comment » December 13th, 2007 at 12:12 pm
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)
-
03.
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.
-
04.
Carlos says:Comment » December 13th, 2007 at 3:52 pm
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)
-
05.
I’ll follow up with the DevO developers to see if they can add your request.
-
06.
Trn says:Comment » December 13th, 2007 at 8:26 pm
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! -
07.
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…
-
08.
-
09.
-
10.
-
11.
Nice Tutorials that helps you to increase skill of CSS.why are you not creating a book on CSS.
-
01.
