Select and Text fields inner margin

[dbaseboy]

Hi all,

Im trying to style my text field and select fields, I've managed to change background color, font etc and right align the text however on the select fields this is not a good thing as the letters are right against the drop down arrow.

I've tried all sorts but cant seem to work out how to put some padding within the field allowing the data to be viewed clearly.

Any ideas?

 

[mkrausnick]

According to this article:

http://www.designmeltdown.com/chapters/Forms/part4.aspx

, the select control is not well-implemented in most browsers. You might try adding a class with a padding-right attribute, but I haven't tried it.

For example, in FF1.5 the background color of the selection in Sample 2 doesn't appear but in IE7 it does. In my experience, FF is usually right and IE is usually wrong, so go figure.

Anyway the article gives you some other pointers that might be useful.

HTH

Mike Krausnick
Dublin, California

 

[monksnake]

You can specify the width on the <select> tag, give it enough width and the arrow for the dropdown won't be in the way.

<.

 

[Vragabond]

What do to and what you cannot do with selects. See here results in many browsers:

http://www.456bereastreet.com/lab/form_controls/select/

 

[ChrisHunt]

Have you tried applying CSS to the <option> instead/as well? You need to be aware that even if it works in one browser, it probably won't in others.

Change the colours if you have to, beyond that it's best not to tinker too much with form controls if you value your sanity.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd