是否有CSS唯一的方式来设置＜select＞下拉列表的样式？
我需要尽可能人性化地设置＜select＞表单的样式，而不需要任何JavaScript。在CSS中，我可以使用哪些财产来执行此操作？
此代码需要与所有主要浏览器兼容：
Internet Explorer 6、7和8Firefox浏览器游猎
我知道我可以用JavaScript实现：示例。
我说的不是简单的造型。我想知道，我们只能用CSS做什么。
我在Stack Overflow上发现了类似的问题。
还有Doctype.com上的这个。
当前回答
使用clip属性裁剪选择元素的边框和箭头，然后将自己的替换样式添加到包装中：
<!DOCTYPE html><html><head><style>选择｛位置：绝对；剪辑：矩形（2px 49px 19px 2px）；z索引：2；｝body＞span｛display：块；位置：相对；宽度：64px；高度：21px；边框：2px纯绿色；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><选择><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
使用不透明度为零的第二次选择使按钮可单击：
<!DOCTYPE html><html><head><style>#实{位置：绝对；剪辑：矩形（2px 51px 19px 2px）；z索引：2；}#假｛位置：绝对；不透明度：0；｝body>span｛display：块；位置：相对；宽度：64px；高度：21px；背景：url(http://www.stackoverflow.com/favicon.ico)右1px不重复；}</style></head><span><select id=“real”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择><select id=“fake”><option value=“”>Alpha</option><option value=“”>Beta版</option><option value=“”>Charlie</option></选择></span></html>
Webkit和其他浏览器的坐标不同，但@media查询可以涵盖这一点。
工具书类
Dojo FX测试：dojox.FX.ext-Dojo.complexCSS掩码：使用rect函数测试剪辑属性，并自动将值剪辑到边框框
其他回答
以下是三种解决方案：
解决方案#1-外观：无-使用Internet Explorer 10-11解决方案（演示）
--
要隐藏默认箭头集外观，请在select元素上选择none，然后添加带有背景图像的自定义箭头
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
浏览器支持：
外观：除了Internet Explorer，没有一个浏览器支持非常好（caniuse）。
我们可以通过添加
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
如果Internet Explorer 9是一个问题，我们没有办法删除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用一个时髦的Internet Explorer 9选择器。
至少撤销我们的自定义箭头-保留默认的选择箭头不变。
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
所有这些：
选择{边距：50px；宽度：150px；填充：5px 35px 5px 5px；字体大小：16px；边框：1px实心#CCC；高度：34px；-webkit外观：无；-moz外观：无；外观：无；背景：url(https://stackoverflow.com/favicon.ico)96%/15%无重复#EEE；}/*警告：Internet Explorer黑客攻击*/select：：-ms扩展{显示：无；/*删除Internet Explorer 10和11中的默认箭头*/}/*以Internet Explorer 9为目标撤消自定义箭头*/@媒体屏幕和（最小宽度：0\0）{选择{背景：无\9；填充：5px \9；}}<选择><option>苹果</option><option selected>菠萝</option><option>楔板</option><option>煎饼</option></选择>
这个解决方案很简单，并且具有良好的浏览器支持——通常应该足够了。
如果需要Internet Explorer的浏览器支持，请提前阅读。
解决方案#2截断select元素以隐藏默认箭头（演示）
--
（在此处阅读更多信息）
用固定宽度和溢出：hidden将select元素包装在div中。
然后给select元素的宽度比div。
结果是select元素的默认下拉箭头将被隐藏（由于溢出：隐藏在容器上），您可以在div的右侧放置任何需要的背景图像。
这种方法的优点是它是跨浏览器的（Internet Explorer 8和更高版本、WebKit和Gecko）。然而，这种方法的缺点是选项下拉列表在右侧突出（我们隐藏了20个像素……因为选项元素占用了选择元素的宽度）。
[然而，需要注意的是，如果自定义选择元素仅对移动设备是必要的，那么上述问题就不适用了，因为每个手机都是以本地方式打开选择元素的。因此，对于移动设备来说，这可能是最佳解决方案。]
.styled选择{背景：透明；宽度：150px；字体大小：16px；边框：1px实心#CCC；高度：34px；}.样式{边距：50px；宽度：120px；高度：34px；边框：1px实心#111；边界半径：3px；溢出：隐藏；背景：url(https://stackoverflow.com/favicon.ico)96%/20%无重复#EEE；}<div class=“styled”><选择><option>菠萝</option><option selected>苹果</option><option>楔板</option><option>煎饼</option></选择></div>
If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of Internet Explorer - then keep reading...
Solution #3 - Use the pointer-events property (demo)
--
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.
Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option elements).
Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn't support pointer-events, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!
However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.
NB: Being that Internet Explorer 10 doesn't support conditional comments anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->不建议编辑此元素，但如果您想尝试，它与任何其他HTML元素一样。
编辑示例：
/* Edit select */
select {
/* CSS style here */
}
/* Edit option */
option {
/* CSS style here */
}
/* Edit selected option */
/* element attr attr value */
option[selected="selected"] {
/* CSS style here */
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
这是可能的，但不幸的是，根据开发人员的要求，大多数情况下都是基于WebKit的浏览器。以下是通过内置开发人员工具检查器从Chrome选项面板收集的CSS样式示例，该检查器经过改进以匹配大多数现代浏览器中当前支持的CSS财产：
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* Fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
当您在基于WebKit的浏览器中的任何页面上运行此代码时，它应该更改选择框的外观，删除标准OS箭头并添加PNG箭头，在标签前后放置一些间距，几乎是您想要的任何内容。
最重要的部分是外观属性，它改变了元素的行为方式。
它在几乎所有基于WebKit的浏览器中都能完美工作，包括移动浏览器，尽管Gecko似乎不像WebKit那样支持外观。
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
这里有一个基于我在这次讨论中最喜欢的想法的解决方案。这允许直接设置＜select＞元素的样式，而无需任何附加标记。
它可以使用Internet Explorer 10（及更高版本），并为Internet Explorer 8/9提供安全回退。这些浏览器需要注意的一点是，背景图像必须定位并足够小，以便隐藏在本机扩展控件后面。
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
代码笔
http://codepen.io/ralgh/pen/gpgbGx
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
