This is 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>
This is CSS
select {
background:#F3F3F3;
border:1px solid #BFC2CC;
color:#555555;
padding:3px;
}
This is output
In IE7 and IE8
alt text http://shup.com/Shup/380925/11061093625-My-Desktop.png
In FF 3.5
alt text http://shup.com/Shup/380926/11061093718-My-Desktop.png
In Google Chrome
alt text http://shup.com/Shup/380927/11061093822-My-Desktop.png
It’s only working accurately in Firefox. how to get same in IE and Chrome?
is there any jquery solution?
I just want to apply my css in all browser, same way. don’t need fancy customization for select
Input elements, especially
selects and file inputs, are notoriously difficult to style. Some browsers use the operating system’s user interface to render controls; others don’t allow access to all the properties (e.g. styling a file upload’s “select” button).If you want 100% streamlined design, you should use a custom, JavaScript-based select element. There are many good solutions in the jQuery camp, many of which degrade gracefully if JavaScript is not present.