jquery - 为什么<select>的样式不能在所有浏览器中以相同的方式起作用？

这是HTML

<div class="DatetimePanel">
    <select class="DaysList">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9" selected="selected">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
    </select>
    <select class="MonthsList">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7" selected="selected">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select class="YearsList">
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010" selected="selected">2010</option>
    </select>
</div>

这是CSS

select {
background:#F3F3F3;
border:1px solid #BFC2CC;
color:#555555;
padding:3px;
}

这是输出

在IE7和IE8中

alt text http://shup.com/Shup/380925/11061093625-My-Desktop.png

在FF 3.5中

alt text http://shup.com/Shup/380926/11061093718-My-Desktop.png

在谷歌浏览器中

alt text http://shup.com/Shup/380927/11061093822-My-Desktop.png

它只能在Firefox中正常工作。如何在IE和Chrome中获得相同的效果？

有没有jQuery的解决方案？

我只想以相同的方式将我的CSS应用于所有浏览器。不需要select精美的自定义

最佳答案

输入元素，尤其是select和文件输入，众所周知很难设置样式。一些浏览器使用操作系统的用户界面来呈现控件。其他则不允许访问所有属性（例如，设置文件上传的“选择”按钮的样式）。

如果要100％简化设计，则应使用基于JavaScript的自定义选择元素。 jQuery阵营中有很多好的解决方案，如果没有JavaScript，其中的许多解决方案都会优雅地降级。

关于jquery - 为什么<select>的样式不能在所有浏览器中以相同的方式起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3218521/