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 a custom dropdown. It's only about possibilities of styling <option> elements with CSS

How can I style <option> s of a <select> element with cross-browser compatibility? I know many JavaScript ways which customize the dropdown to convert into <li> , which I'm not asking about. 

<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 for IE9+, Firefox, and Chrome.

在这里输入图像描述

I want to style like this or as close as possible.

在这里输入图像描述

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

EDIT 2015 May

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

Important Update!

In addition to WebKit, as of Firefox 35 we'll be able to use the appearance property:

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>

There is no cross-browser way of styling option elements, certainly not to the extent of your second screenshot. You might be able to make them bold, and set the font-size, but that will be about it...

I've played around with select items before and without overriding the functionality with JavaScript, I don't think it's possible in Chrome. Whether you use a plugin or write your own code, CSS only is a no go for Chrome/Safari and as you said, Firefox is better at dealing with it.

链接地址: http://www.djcxy.com/p/7166.html

上一篇: 如何以CSS垂直居中文本

下一篇: 如何使用CSS设计<option>？