How to style the lt;optiongt; with only CSS?(如何设置 lt;optiongt; 的样式只有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-appearance
with thenone
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.
这篇关于如何设置 <option> 的样式只有CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何设置 <option> 的样式只有CSS?
基础教程推荐
- 动态更新多个选择框 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 响应更改 div 大小保持纵横比 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01