Databases
StackOverflow2013
Postsdbo
POWhy style for <select> not working in same way in all browser?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy style for <select> not working in same way in all browser?
    text
    copied!<p>This is HTML</p> <pre><code>&lt;div class="DatetimePanel"&gt; &lt;select class="DaysList"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9" selected="selected"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;option value="11"&gt;11&lt;/option&gt; &lt;option value="12"&gt;12&lt;/option&gt; &lt;option value="13"&gt;13&lt;/option&gt; &lt;option value="14"&gt;14&lt;/option&gt; &lt;option value="15"&gt;15&lt;/option&gt; &lt;option value="16"&gt;16&lt;/option&gt; &lt;option value="17"&gt;17&lt;/option&gt; &lt;option value="18"&gt;18&lt;/option&gt; &lt;option value="19"&gt;19&lt;/option&gt; &lt;option value="20"&gt;20&lt;/option&gt; &lt;option value="21"&gt;21&lt;/option&gt; &lt;option value="22"&gt;22&lt;/option&gt; &lt;option value="23"&gt;23&lt;/option&gt; &lt;option value="24"&gt;24&lt;/option&gt; &lt;option value="25"&gt;25&lt;/option&gt; &lt;option value="26"&gt;26&lt;/option&gt; &lt;option value="27"&gt;27&lt;/option&gt; &lt;option value="28"&gt;28&lt;/option&gt; &lt;option value="29"&gt;29&lt;/option&gt; &lt;option value="30"&gt;30&lt;/option&gt; &lt;option value="31"&gt;31&lt;/option&gt; &lt;/select&gt; &lt;select class="MonthsList"&gt; &lt;option value="1"&gt;January&lt;/option&gt; &lt;option value="2"&gt;February&lt;/option&gt; &lt;option value="3"&gt;March&lt;/option&gt; &lt;option value="4"&gt;April&lt;/option&gt; &lt;option value="5"&gt;May&lt;/option&gt; &lt;option value="6"&gt;June&lt;/option&gt; &lt;option value="7" selected="selected"&gt;July&lt;/option&gt; &lt;option value="8"&gt;August&lt;/option&gt; &lt;option value="9"&gt;September&lt;/option&gt; &lt;option value="10"&gt;October&lt;/option&gt; &lt;option value="11"&gt;November&lt;/option&gt; &lt;option value="12"&gt;December&lt;/option&gt; &lt;/select&gt; &lt;select class="YearsList"&gt; &lt;option value="1998"&gt;1998&lt;/option&gt; &lt;option value="1999"&gt;1999&lt;/option&gt; &lt;option value="2000"&gt;2000&lt;/option&gt; &lt;option value="2001"&gt;2001&lt;/option&gt; &lt;option value="2002"&gt;2002&lt;/option&gt; &lt;option value="2003"&gt;2003&lt;/option&gt; &lt;option value="2004"&gt;2004&lt;/option&gt; &lt;option value="2005"&gt;2005&lt;/option&gt; &lt;option value="2006"&gt;2006&lt;/option&gt; &lt;option value="2007"&gt;2007&lt;/option&gt; &lt;option value="2008"&gt;2008&lt;/option&gt; &lt;option value="2009"&gt;2009&lt;/option&gt; &lt;option value="2010" selected="selected"&gt;2010&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>This is CSS</p> <pre><code>select { background:#F3F3F3; border:1px solid #BFC2CC; color:#555555; padding:3px; } </code></pre> <p>This is output</p> <p>In <strong>IE7</strong> and <strong>IE8</strong></p> <p><a href="http://shup.com/Shup/380925/11061093625-My-Desktop.png" rel="nofollow noreferrer">alt text http://shup.com/Shup/380925/11061093625-My-Desktop.png</a></p> <p>In <strong>FF 3.5</strong></p> <p><a href="http://shup.com/Shup/380926/11061093718-My-Desktop.png" rel="nofollow noreferrer">alt text http://shup.com/Shup/380926/11061093718-My-Desktop.png</a></p> <p>In <strong>Google Chrome</strong></p> <p><a href="http://shup.com/Shup/380927/11061093822-My-Desktop.png" rel="nofollow noreferrer">alt text http://shup.com/Shup/380927/11061093822-My-Desktop.png</a></p> <p>It's only working accurately in Firefox. how to get same in IE and Chrome?</p> <p>is there any jquery solution?</p> <p>I just want to apply my css in all browser, same way. don't need fancy customization for <code>select</code></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload