Select

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

shapper schrieb:

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?

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?

In article <48858c53$0$19922$9b4e6d93 (AT) newsspool1 (DOT) arcor-online.net>,
Christian Kirsch <ck (AT) bru6 (DOT) de> wrote:

shapper schrieb:
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?

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?

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?

..oO(shapper)

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?

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