Why style for <select> not working in same way in all browser?

Question

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

In FF 3.5

In Google Chrome

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

Answer 1

Input elements, especially select s 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.

Answer 2

I just want to apply my css in all browser, same way. don't need fancy customization for select

Fancy customisation's are generally a way of making up for lack of browser support for basic things like this. If you want a pure CSS solution, your only option is to report this as a bug in Chrome and IE and wait. It's simply something only Firefox and Opera currently support.

Webkit does provide you with some proprietary stuff, which is fairly hackish, but will give your slightly more freedom: select{ -webkit-appearance:none; } though that's not really recommended as might be unintuitive for Webkit users.