Jitendra Vyas Jitendra Vyas - 3 months ago 8
CSS Question

How to style the <option> with only CSS?


Possible Duplicate:

How to style <select> dropdown with css only without javascript?

Html Select box options on Hover?




Note: This question is not about Making custom dropdown. It's only about possibilities of styling
<option>
with css



What are maximum possibilities of styling
<option>
of
<select>
with cross browser compatibility? I know many JavaScript ways which customize the dropdown to convert into
<li>
which I'm not asking.

<select class="select">
<option selected>Select</option>
<option>Blue</option>
<option >Red</option>
<option>Green</option>
<option>Yellow</option>
<option>Brown</option>
</select>


I'm asking what could be possible with CSS only. with compatibility of IE9, Firefox and Chrome.

enter image description here

I want to style like this or whatever possible to closest

enter image description here

I tried here http://jsfiddle.net/jitendravyas/juwz3/3/ but Chorme doesn't show any styling except font color while Firefox shows some more. How to get Border and padding work in Chrome too?

Answer

EDIT 2015 May

Disclaimer: I've took the snippet from the answer linked below:

Important Update!

In addition to webkit, as of Firefox V35 we'll be able to use the appearance property.

(From the above link:)

Using -moz-appearance with the none value on a combobox now remove the dropdown button

So now in order to hide the default styling - it's as easy as adding the following rules on our select element:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

For IE 11 support, you can use [::-ms-expand][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Old Answer

Unfortunately what you ask is not possible by using pure CSS. However, here is something similar that you can choose as a work around. Check the live code below.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

Here is the question that you asked some time ago. How to style a <select> dropdown with CSS only without JavaScript? As it tells there, only in Chrome and to some extent in Firefox you can achieve what you want. Otherwise, unfortunately, there is no cross browser pure CSS solution for styling a select.

Comments