Question

这是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

在 Google Chrome

中

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

它只能在Firefox中准确运行。如何在IE和Chrome中获得相同的效果？

有没有jquery解决方案？

我只想在所有浏览器中以同样的方式应用我的CSS。不需要为select

进行花哨的自定义

Answer 1

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

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

Answer 2

我只想在所有浏览器中以同样的方式应用我的CSS。不需要花哨的自定义选择

花哨的定制通常是弥补浏览器对这类基本内容缺乏支持的一种方式。如果你想要一个纯CSS解决方案，你唯一的选择是将此报告为Chrome和IE中的错误并等待。这只是Firefox和Opera目前支持的东西。

Webkit确实为您提供了一些专有的东西，这些东西相当hackish，但会给您带来更多的自由： select{ -webkit-appearance:none; } 虽然这不是真正推荐的，但对Webkit用户来说可能不直观。

为什么<select>的样式在所有浏览器中都不能以相同的方式工作？</select>

2 个答案: