如何设置 <option>只有CSS? [英] How to style the <option> with only CSS?
问题描述
注意:这个问题与制作自定义下拉菜单无关.这只是关于在 CSS 中的 select 元素中设置
如何设置具有跨浏览器兼容性的 元素的 s 样式?我知道许多 JavaScript 方法可以自定义下拉列表以转换为 <li>，这不是我要问的.
我问的是仅使用 CSS 可以实现什么，同时兼容 IE9+、Firefox 和 Chrome.
我想要这样或尽可能接近的风格.
我在这里尝试了 http://jsfiddle.net/jitendravyas/juwz3/3/，但除了字体颜色之外，Chrome 不会显示任何样式，而 Firefox 会显示更多样式.如何在 Chrome 中获得边框和内边距?
EDIT 2015 May
免责声明:我从下面链接的答案中提取了片段:
重要更新！
除了 WebKit，从 Firefox 35 开始，我们将能够使用 appearance 属性:
在组合框上使用 -moz-appearance 和 none 值现在删除下拉按钮
所以现在为了隐藏默认样式，就像在我们的 select 元素上添加以下规则一样简单:
select {-webkit 外观:无；-moz-外观:无；外观:无；}对于 IE 11 支持，您可以使用 [::-ms-expand][15].
select::-ms-expand {/* IE 11 */显示:无；}旧答案
不幸的是，使用纯 CSS 无法满足您的要求.但是，您可以选择类似的方法作为解决方法.检查下面的实时代码.
div {边距:10px；填充:10px；边框:2px纯紫色；宽度:200px；-webkit-border-radius: 5px;-moz-border-radius: 5px;边框半径:5px；}div >ul { 显示:无；}div:悬停 >ul {显示:块；背景:#f9f9f9；边框顶部:1px 纯紫色；}div:悬停 >升 >li { 填充:5px;边框底部:1px 实心 #4f4f4f;}div:悬停 >升 >li:悬停{背景:白色；}div:悬停 >升 >李:悬停>{ 颜色:红色；}选择<ul><li><a href="#">项目 1</a></li><li><a href="#">项目 2</a></li><li><a href="#">项目 3</a></li>编辑
这是您前段时间提出的问题.如何为 正如它所说的那样，只有在 Chrome 中，并且在某种程度上在 Firefox 中，您才能实现您想要的.否则，不幸的是，没有用于样式选择的跨浏览器纯 CSS 解决方案.
Note: This question is not about making a custom dropdown. It's only about possibilities of styling <option> elements within the select element in 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-appearancewith thenonevalue 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.
这篇关于如何设置 <option>只有CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
