CODEWITHSUNDEEP
jquerycssxhtmlcross-browser
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

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

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

Upvotes: 2

Views: 418

Answers (2)

lucideer
lucideer

Reputation: 3882

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.

Upvotes: 1

Pekka
Pekka

Reputation: 449425

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.

Upvotes: 2

Related Questions