Styling `<select>` in Internet Explorer

Any way to customize the border and background of an HTML <select> in IE? I can style the border with simple CSS in Firefox, but apparently not in IE.

Answers


IE is most likely in quirks mode. Previous versions of IE didn't draw the select element themselves and thus it couldn't be styled properly (as well as some z-order quirks), so on IE < 8 you simply can't do it, unless you re-implement something like select in JS. Take a look at the developer tools (F12) to see which browser and document mode IE is in; if it says "Internet Explorer 8" for the Browser mode and not "Quirks mode" for the document mode, you should be ok :)

The following snippet works fine here (IE8β2):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            select {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <form>
            <select>
                <option>1</option>
                <option>2</option>
            </select>
        </form>
    </body>
</html>

Include these tags in your code:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
</head>

This will resolve issues related to Internet Explorer.


Need Your Help

Hassle-free js file merging

javascript phpstorm

I like the approach used by https://github.com/cjohansen/juicer/tree/master for merging js files. But it seems it lakes a watch mechanism. Is it any other similar tool with watch ability?

Use/Install libraries on server, without sudo

centos shared-libraries phantomjs freetype fontconfig

I have an account with bluehost that gives me ssh access, but no sudo, so I cannot use yum (it’s a CentOS server).