Select

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

shapper - 21 Jul 2008 20:14 GMT

Hello,

I am trying to style my form inputs, textareas and selects as follows:

input, select, textarea {
border: solid 6px #ECF0F9;
color: #252525;
font: normal 0.75em Verdana, Geneva, sans-serif;
padding: 0.25em;
width: 520px;
}

I am having a few problems:

Firefox 3:

1. The select is narrow than the inputs and textareas;
2. When I click the select the dropdown borders look different ...
some are thinner than others.

IE 7:

1. The select is narrow than the inputs and textareas;
2. The border of the select is not changed.

What am I doing wrong and how can I make the appearance of a Select
look the same across various browsers?

Thanks,
Miguel

Reply to this Message

Christian Kirsch - 22 Jul 2008 08:29 GMT

shapper schrieb:

> Hello,
>
[quoted text clipped - 23 lines]
> What am I doing wrong and how can I make the appearance of a Select
> look the same across various browsers?

As far as I know: You can't. And there are even people who say you
shouldn't: users expect the form elements to be consistent across
applications.

BTW: What do you intend to achieve with a width given in pixels, whereas
the font size and padding are specified in em? What happens when the
user increases the font size?

Reply to this Message

David Stone - 22 Jul 2008 14:10 GMT

> shapper schrieb:
> > Hello,
[quoted text clipped - 32 lines]
> the font size and padding are specified in em? What happens when the
> user increases the font size?

Or what happens if they don't have Verdana on their system, and
their browser falls back to Geneva at 75% of the user's preferred
size?

Reply to this Message

Gregor Kofler - 24 Jul 2008 17:09 GMT

shapper meinte:

> What am I doing wrong and how can I make the appearance of a Select
> look the same across various browsers?

You can't. Just like file input elements.

Gregor

Signature

http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Reply to this Message

Michael Fesser - 24 Jul 2008 21:16 GMT

.oO(shapper)

>I am trying to style my form inputs, textareas and selects as follows:
>
[quoted text clipped - 21 lines]
>What am I doing wrong and how can I make the appearance of a Select
>look the same across various browsers?

Not possible. Every browser has its own way for rendering form controls.
Some use the widgets offered by the operating system, some use their own
widget library, others may even support graphical themes. There's no way
to make form controls appear the same across various browsers/platforms.

Some things can be changed with CSS, though, but you should still expect
a lot of browser differences or poor support for styling form elements.

Micha

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

Select