这是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
答案 0 :(得分:2)
输入元素,尤其是select
和文件输入,众所周知难以设计。有些浏览器使用操作系统的用户界面来呈现控件;其他人不允许访问所有属性(例如,设置文件上传的“选择”按钮)。
如果您想要100%简化设计,则应使用基于JavaScript的自定义select元素。 jQuery阵营中有许多很好的解决方案,如果不存在JavaScript,其中许多解决方案会优雅地降级。
答案 1 :(得分:1)
我只想在所有浏览器中以同样的方式应用我的CSS。不需要花哨的自定义选择
花哨的定制通常是弥补浏览器对这类基本内容缺乏支持的一种方式。如果你想要一个纯CSS解决方案,你唯一的选择是将此报告为Chrome和IE中的错误并等待。这只是Firefox和Opera目前支持的东西。
Webkit确实为您提供了一些专有的东西,这些东西相当hackish,但会给您带来更多的自由:
select{ -webkit-appearance:none; }
虽然这不是真正推荐的,但对Webkit用户来说可能不直观。