如何使用CSS样式化<选项>?(复制)-HowtostylethewithonlyCSS?[duplicate]

Possible Duplicate:
How to style dropdown with css only without Javascript?
Html Select box options on Hover?

可能的重复:如何在没有Javascript的情况下使用css样式 <选择> 下拉?Html选择框选项悬停?

Note: This question is not about making a custom dropdown. It's only about possibilities of styling elements with CSS

How can I style s of a

element with cross-browser compatibility? I know many Javascript ways which customize the dropdown to convert into

, which I'm not asking about.

如何为元素设计具有跨浏览器兼容性的s ?我知道许多Javascript方法，可以自定义下拉菜单，以转换为，这不是我要问的。

    Select
    Blue
    Red
    Green
    Yellow
    Brown

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

我想问的是，只有CSS，以及IE9+、Firefox和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?

我在这里尝试了http://jsfiddle.net/jitendravyas/juwz3/3/ /，但是Chrome除了字体颜色外没有显示任何样式，而Firefox则显示更多。如何使边框和填充也在Chrome中工作?

3 个解决方案

#1

---

65  

EDIT 2015 May

编辑2015年5月

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:

除了WebKit, Firefox 35我们还可以使用外观属性:

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

使用- mozilla -appearance并在combobox上使用none值，现在删除下拉按钮

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

所以现在为了隐藏默认样式，只需在select元素中添加以下规则:

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

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

对于IE 11支持，可以使用[::-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.

不幸的是，使用纯CSS是不可能的。但是，这里有一些类似的东西，您可以选择作为工作。检查下面的实时代码。

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; }

  Select
  

    
Item 1
    
Item 2
    
Item 3
  

EDIT

编辑

Here is the question that you asked some time ago. How to style a 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.

这是你刚才问的问题。如何在不使用Javascript的情况下使用CSS样式化

下拉?正如上面所说，只有在Chrome和Firefox中，你才能实现你想要的。否则，不幸的是，没有跨浏览器纯CSS解决方案用于样式化选择。

#2

---

4  

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...

没有跨浏览器样式化选项元素的方式，当然也没有第二个屏幕截图。你或许可以把字体加粗，设置字体大小，但仅此而已……

#3

---

2  

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.

我曾经尝试过使用select项，但没有使用Javascript重写功能，我认为Chrome不可能实现这一点。不管你是使用插件还是编写自己的代码，CSS都不会支持Chrome/Safari浏览器，正如你所说，Firefox更擅长处理它。