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:

Quote:

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@newsspool1.arcor-online.net>,
Christian Kirsch <ck@bru6.dewrote:

Quote:

shapper schrieb:

Quote:

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?

shapper meinte:

Quote:

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

..oO(shapper)

Quote:

>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

Select

re: Select

re: Select

re: Select

re: Select

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about