Home/ Questions/Q 7031303
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:47:09+00:00

Until recently, our app did not specify a doctype. Then, to make the app

  • 0

Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:

<html>
<select>
    <option>Testing</option>
</select>
</html>

This HTML is rendered like this in IE9:

no doc type

Then I just add a doctype as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
    <option>Testing</option>
</select>
</html>

The HTML then renders like this:

with doc type

There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We’d like to keep it how it used to display, but I’m not sure if that’s possible.

I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.

Is there any way to control this? Any information about this would be much appreciated. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

    http://bavotasan.com/2011/style-select-box-using-only-css/

    • 0