homepage Welcome to WebmasterWorld Guest from 54.81.170.186
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
How do I apply styling to <form> elements?
Using css element selectors not classes or ids
grahamstewart




msg:1175025
 4:59 am on Apr 30, 2003 (gmt 0)

Has anyone had any luck devising selectors for form elements that will let people style the various elements of the form?

My particular problem is that I'd like to give all my text inputs a redish border (to match the background of the coloured form). Some of them should also have large text.

At the moment I use these rules..

form.coloured input, form.coloured textarea {
border: 1px solid #f2bba7;
}
form input.largetext {
font-size: 150%;
}

which worked just great until I discovered that IE doesn't handle <button> properly [webmasterworld.com]. :(

So now I need to use the <input type="submit"> buttons instead, which get affected by the border rule above and look horrible.

Is there anyway to target the rule at text input only without using classes/id?
Or do I have to go through all my forms and add a class to all the text inputs?

I tried the input[type="text"] selector but that doesn't seem to work. :(

 

DrDoc




msg:1175026
 5:04 am on Apr 30, 2003 (gmt 0)

CSS3 selectors are not supported by IE6 (maybe in IE9 ;))

So, I'm afraid the best option is to use either a class or ID for the button. I usually use .button. Then you can always style it the way you want, reset previous borders/styles too if needs be :)

grahamstewart




msg:1175027
 5:10 am on Apr 30, 2003 (gmt 0)

Grrr.. I was afraid of that.

Okay, if I just add a .button class to my buttons then is there any way to return the button border to its default 'buttony' look?

BTW: input[type="text"] is not a CSS3 selector, attribute selectors [w3.org] are in the CSS2 spec.

Just not actually suppported by Microsoft apparently. :(

papabaer




msg:1175028
 5:25 am on Apr 30, 2003 (gmt 0)

CSS3 selectors are not supported by IE6 (maybe in IE9 ;))

LOL! Hey DrDoc! aren't you rushing IE a bit? Maybe IE19.... IE, the new NN4!

Attribute selectors will make managing style soooo much easier. I use some now, but only for non-critical items.

Where I would LOVe to use them is in this situation:

a[href] {some:style;}

I use a number of anchors for reference/content (<a id="def-sound-sampling">Sound sampling</a>) The ability to style only anchors that have the "href" attribute would allow me to eliminate a .class that currently allows me to differentiate between the two types.

Opera and Mozilla(family) support attribute selectors very nicely! While IE.... well....!

grahamstewart




msg:1175029
 5:34 am on Apr 30, 2003 (gmt 0)

Opera and Mozilla(family) support attribute selectors very nicely! While IE.... well....!

Yup, I use this one in my print stylesheets..

a.external:after {
content: " (" attr(href) ") ";
font-size: 90%;
}

It adds in the address of the link in brackets after the link text. Works great in Opera, but not IE. I leave it in there in the hope that IE will eventually support it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved