<option>CSS中select元素中样式元素的可能性如何使用跨浏览器兼容性<option>来设置<select>元素的样式?我知道很多JavaScript方法可以自定义下拉列表以进行转换<li>,我不会问.
<select class="select">
<option selected>Select</option>
<option>Blue</option>
<option >Red</option>
<option>Green</option>
<option>Yellow</option>
<option>Brown</option>
</select>
Run Code Online (Sandbox Code Playgroud)
我问的是,只有CSS可以实现什么,兼容IE9 +,Firefox和Chrome.

我希望这样或尽可能接近样式.

我在这里试过http://jsfiddle.net/jitendravyas/juwz3/3/,但除了字体颜色外,Chrome没有显示任何样式,而Firefox则显示更多.如何在Chrome中获得边框和填充功能?
我想更改下拉列表箭头的默认外观,以便在浏览器中看起来相同.有没有办法使用CSS或其他方式覆盖下拉箭头的默认外观?
我需要你的帮助.
我似乎无法绕过这个并想出来.如何在选择框中更改默认的Windows 7,IE 10默认箭头:
使用下面的自定义箭头使其看起来像这样:
.
这是我想要使用的箭头:
这是我的HTML标记:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
select { font: normal 13px Arial; color: #000;}
.container {
border: 1px solid red;
position: relative; width: 124px; height: 18px; overflow: hidden;
}
.inpSelect {
color: black; background: #ffa;
position: absolute; width: 128px; top: -2px; left: -2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">actual browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 请看这个例子:
select {
width: 172px;
height: 22px;
padding: 2px 7px;
border: none;
background: url(http://imgur.com/MJyZM.png) 0 0 no-repeat;
}Run Code Online (Sandbox Code Playgroud)
<select>
<option value="abcdefg">abcdefg</option>
<option value="1234567">1234567</option>
<option value="abcdefg">abcdefg</option>
</select>Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/jeafgilbert/wz0zaev0/
有人可以将其更新为在Chrome中透明吗?目前FF中的结果是正确的.谢谢.
更新:
现在-webkit-appearance: none;Chrome 无法正常使用.
我正在建立一个网站(基于Wordpress,自定义主题),我想在CSS中的选择输入字段中添加/向下箭头.我用来为选择输入字段创建向上/向下箭头的HTML代码是:
<p>
<select name="filter_31" id="search-box-filter_31">
<option value="Vancouver Island University">University of A</option>
<option value="Western University">University of B</option>
<option value="Wilfrid Laurier University">University of C</option>
<option value="York University">University of D</option>
</select>
</p>
Run Code Online (Sandbox Code Playgroud)
以下代码是完整的小提琴https://jsfiddle.net/ovp8Lxjw/4/embedded/result.此刻,它只有向下箭头.
在上面的小提琴中,我想添加蓝色的上/下箭头.此时,它仅显示向下箭头.
问题陈述:
我想知道我需要在上面的小提琴中添加什么CSS代码,以便我可以在css的select输入字段中看到上/下箭头(如下面的屏幕截图所示,用箭头标记).我不能对HTML代码进行任何更改,因为它来自wordpress 网站的检查.
我有一个这样的选择:
<select id="sbInBreak2_hh" name="sbInBreak2_hh">
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>Run Code Online (Sandbox Code Playgroud)
在 Chrome 上没问题,PM 要求我在 Safari 和 IE 上显示在 Chrome 上相同吗?css怎么可以呢?
在 Chrome 上
在 Safari 和 IE 上