IE issue with styling <select/> element

2019-09-07 14:33发布

站内问答 / jQuery
749 4 4

Consider the following HTML markup:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>search/master</title>
        <style type="text/css">
            select{
                background-color: pink;
            }
            option{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <p>
            <select>
                <option>one........</option>
                <option>two........</option>
            </select> 
        </p>
    </body>
</html>

Output on FF as follows: (Similar output comes on Chrome, Safari and Opera as well)

output on FF & other browsers

But output on IE as follows:

output on IE

What is the reliable and simple workaround to make the output on IE looks similar to other browsers?

4条回答
贪生不怕死
2楼-- · 2019-09-07 14:37

The problem occurs when we specify some background color for the options inside the select element and the select element itself.

Workaround : Apply style (background-color) to the option elements only when the select element is in focussed state. ( it is only during focussed state of the select element we actually see the option elements inside it )

 select{
     background-color: #f1f1f1;
     ...              
  }

  select:focus > *{
    background-color:#fff;
  }
查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
3楼-- · 2019-09-07 14:55

If you definitely want to do this, you could use a 1px x 1px background image, and set the option to :transparent

select{
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
    background: transparent;
}

See the jsfiddle example i have done for you

查看更多
0人赞 添加讨论(0) 举报
叛逆
4楼-- · 2019-09-07 14:56

If you make both background color( for select and option) pink, it looks exactly the same in every browser. A better solution maybe..do not specify the background color on the option element at all....

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
5楼-- · 2019-09-07 14:59

  • First remove the following css value, it's giving the OPTIONS a white background color and thus hiding the select's pink background color in IE.

    option {
    background-color: white;
}

  • Second always enclose Form elements inside the Form and Fieldset tag like shown below:-

    <form>
<fieldset>
    <select>
        <option>One</option>
    </select>
</fieldset>
</form>

  • Third Form and Fieldset have a default border and padding values so in css you can add this code to remove those default values:

    form, fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

So in short the main reason for IE not displaying the Select Box correctly is because the select element isn't enclosed in FORM and the OPTION's White background color value.

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)