Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Select

0 views
Skip to first unread message

shapper

unread,
Jul 21, 2008, 3:14:53 PM7/21/08
to
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

Christian Kirsch

unread,
Jul 22, 2008, 3:29:23 AM7/22/08
to
shapper schrieb:

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?

David Stone

unread,
Jul 22, 2008, 9:10:17 AM7/22/08
to
In article <48858c53$0$19922$9b4e...@newsspool1.arcor-online.net>,
Christian Kirsch <c...@bru6.de> wrote:

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?

Gregor Kofler

unread,
Jul 24, 2008, 12:09:08 PM7/24/08
to
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


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

Michael Fesser

unread,
Jul 24, 2008, 4:16:04 PM7/24/08
to
.oO(shapper)

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

0 new messages