Ad

Why Do Chrome, Firefox And IE All Render Fixed-width SELECT Controls Differently?

- 1 answer

I am losing hair on this one ... it seems that when I fix width an HTML SELECT control it renders its width differently depending on the browser.

Any idea how to to standardize this without having to turn to multiple style sheets?

Here is what I am working with:

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

This is my document type for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ad

Answer

Form controls will always be less obedient to styling attempts,in particular selects and file inputs, so the only way to reliably style them cross-browser and with future-proofing in mind, is to replace them with JavaScript or Flash and mimic their functionality

Ad
source: stackoverflow.com
Ad