如何设置样式< option>只有CSS？ [英] How to style the <option> with only CSS?

问题描述

可能重复：

，但Chrome不显示任何样式，除了字体颜色，而Firefox显示更多。

解决方案

EDIT 2015年5月

免责声明：我已经从以下链接的回答中取得了代码段：

重要更新！

除了WebKit之外，自 Firefox 35 我们可以使用外观属性：

使用<$使用组合框上的 none 值删除
下拉按钮

$ b> c $ c> -moz-appearance $ b

现在为了隐藏默认样式，就像在select元素上添加以下规则一样简单：

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

对于IE 11支持，可以使用[： ：-ms-expand [15]。

  * for IE 11 * / 
 display：none; 
} 
  

旧答案 b


不幸的是，你问的是不可能使用纯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;背景：＃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&选择< ul> < li>< a href =＃>项目1< / a>< / li> < li>< a href =＃>项目2< / a>< / li> < li>< a href =＃>第3项< / a>< / li> < / ul>< / div>  

EDIT

这是您先前询问过的问题。
如何为< select>下拉与CSS只有没有JavaScript？
正如它告诉那里，只有在Chrome和在某种程度上在Firefox中，你可以实现你想要的。否则，不幸的是，没有跨浏览器纯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>

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.

这篇关于如何设置样式&lt; option&gt;只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！