Welcome to WebmasterWorld Guest from 34.229.97.16

Forum Moderators: not2easy

Message Too Old, No Replies

Styling an input box

How?

     
10:08 am on Apr 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:932
votes: 0


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

10:16 am on Apr 13, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 13, 2004
posts:97
votes: 0



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!
:-)

10:18 am on Apr 13, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:July 9, 2003
posts:408
votes: 0


<too slow, better answer already :) >
10:56 am on Apr 13, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Jan 1, 2003
posts:490
votes: 0


Nice tips, thanks! :)
11:18 am on Apr 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 11, 2002
posts:2024
votes: 0


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?

11:21 am on Apr 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 15, 2003
posts:7256
votes: 3


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

11:38 am on Apr 13, 2004 (gmt 0)

Inactive Member
Account Expired

 
 


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!

11:56 am on Apr 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 11, 2002
posts:2024
votes: 0


*sigh* I assumed as much...
3:55 pm on Apr 13, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Sept 27, 2003
posts:156
votes: 0


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)

4:18 pm on Apr 13, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 11, 2002
posts:2024
votes: 0


Very important observation! Thank you very much.
2:23 am on Apr 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:932
votes: 0


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

6:10 am on Apr 14, 2004 (gmt 0)

Inactive Member
Account Expired

 
 


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.

2:42 pm on Apr 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:932
votes: 0


Okay. And thanks.

Patrick

2:46 pm on Apr 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member trillianjedi is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 15, 2003
posts:7256
votes: 3


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

TJ

3:00 pm on Apr 14, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 11, 2002
posts:2024
votes: 0


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.

12:27 pm on Apr 16, 2004 (gmt 0)

New User

10+ Year Member

joined:Nov 24, 2003
posts:21
votes: 0


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.