Styling an input box

How?

[Patrick Taylor]

I'm using this in my stylesheet, for a textarea:

textarea {
background-color:#EBEAE2;
color: #000000;
font-family:Georgia,Verdana,sans-serif;
font-size:13px;
line-height:15px;
font-weight:normal
}

What is the correct way to style an input box in a stylesheet? So far, I'm doing it within the page using html:

<input style="background-color:#EBEAE2; color:#000000; font-family:Georgia,Verdana,sans-serif; font-weight:normal;" type="text" name="your_name" size="60" maxlength="255">

Thanks in advance,

Patrick

[Stratus42]

What is the correct way to style an input box in a stylesheet? So far, I'm doing it within the page using html:

<input style="background-color:#EBEAE2; color:#000000; font-family:Georgia,Verdana,sans-serif; font-weight:normal;" type="text" name="your_name" size="60" maxlength="255">

Hi!
Personally, I would just add all that stuff to my style sheet and attribute it to "input" ie: in my stylesheet I would have this:

input { 
background-color:#EBEAE2; 
color: #000; 
font: normal 13px Georgia, Verdana, sans-serif;
line-height:15px; 
}

and that would apply this same style to every text input box I have :-)

hope this helps!
:-)

[mcavill]

<too slow, better answer already :) >

[andy_boyd]

Nice tips, thanks! :)

[pmkpmk]

Hijacking this thread (just a little) I have a similar question:

Has anybody managed to change the layout of the "down arrow" for dropdown-listboxes? I can't find any reference anywhere, and I haven't seen it changed anywhere. So maybe it's impossible?

[trillianjedi]

Actually, I'd also like to hijack just a little bit and ask if it's possible to change the style of the checkbox form item?

Ideally, just getting rid of that horribly dated 3D effect would be a start.

TJ

[dcrombie]

In general, all FORM elements are based on the O/S widget-set. That means that if you use Windows they look clunky'wheras if you use a Mac (or SGI) then they 'glow'. On UNIX they can look a bit cheap. And so on...

On some platforms/browsers you can style them (change the size/colours) using CSS but in others you cannot.

So the answer to ANY question about styling form elements (about every 4-5 posts in this forum) is NO! There is no way to modify form elements in a way that is cross-browser compatible. Deal with it!

[pmkpmk]

*sigh* I assumed as much...

[madmac]

I just wanted to add something here....

I am on Mac OS X and noticed that safari would not style certain form elements, unless they were entering into CSS will all caps (ie INPUT, TEXTAREA, SELECT, etc). I can't remember at the moment which ones it ignored unless they were all caps. I noticed the same for images too.. it must be IMG or IMG.classname (img & img.classname are ignored)

[pmkpmk]

Very important observation! Thank you very much.

[Patrick Taylor]

Stratus42:

input {
background-color:#EBEAE2;
color: #000;
font: normal 13px Georgia, Verdana, sans-serif;
line-height:15px;
}

Thanks. That works nicely, except that it styles the submit button too, which I would like to keep in default Windows style. Is there a way I can style only the input box?

dcrombie: the answer to ANY question about styling form elements (about every 4-5 posts in this forum) is NO! There is no way to modify form elements in a way that is cross-browser compatible. Deal with it!

Thanks for that too, but it looks okay in IE and Mozilla on Windows, so I'm happy with that.

Regards,

Patrick

[dcrombie]

Is there a way I can style only the input box?

CSS3 supports: INPUT[type=text] as a selector but it'll be a long(horn) time before MSIE catches up with that. You'll need to add class attributes to your forms to separate buttons from other INPUT elements.

[Patrick Taylor]

Okay. And thanks.

Patrick

[trillianjedi]

Can you use javascript to create your own form components which you're in charge of painting?

TJ

[pmkpmk]

That's coincidences for you.... today I read a very intresting article about XFORMS in a computer magazine. XFORMS is an extension for XHTML which seperates content and design (sounds familar, eh) for online and offline(!) forms. Also, it will give you complete control over the design of your forms.

The bad news is: this will only work when at least all major browsers support XHTML and we're nowhere near it right now.

[tompage]

I am on Mac OS X and noticed that safari would not style certain form elements, unless they were entering into CSS will all caps (ie INPUT, TEXTAREA, SELECT, etc). I can't remember at the moment which ones it ignored unless they were all caps. I noticed the same for images too.. it must be IMG or IMG.classname (img & img.classname are ignored)

I use CSS on Mac OS X and have used every iteration of Safari as it has developed and I have never had this problem. My own site styles images and form elements in CSS using lowercase and Safari doesn't seem to have a problem displaying the elements as styled.