是否有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函数测试剪辑属性，并自动将值剪辑到边框框
其他回答
我有这个确切的问题，除了我不能使用图像，而且不受浏览器支持的限制。这应该是“符合规范”，幸运的话，最终开始在各地工作。
它使用分层旋转的背景层来“剪切”下拉箭头，因为伪元素不适用于select元素。
编辑：在这个更新版本中，我使用了CSS变量和一个小型主题系统。
：根目录{--半径：2px；--baseFg：灰色；--baseBg：白色；--重音Fg:#006fc2；--重音Bg:#bae1ff；}.主题粉色{--半径：2米；--baseFg:#c70062；--baseBg:#ffe3f1；--重音Fg:#c70062；--重音Bg:#ffaad4；}.主题结构{--半径：0；--baseFg：白色；--baseBg：黑色；--accentFg：黑色；--accentBg：橙色；}选择{字体：400 12px/1.3无衬线；-webkit外观：无；外观：无；颜色：var（--baseFg）；border:1px实体变量（--baseFg）；线高：1；大纲：0；衬垫：0.65em 2.5em 0.55em 0.75em；边界半径：var（--radius）；背景色：var（--baseBg）；背景图像：线性梯度（var（--baseFg）、var（--baseFg）），线性梯度（-135度，透明50%，var（--accentBg）50%），线性梯度（-225度，透明50%，var（--accentBg）50%），线性梯度（var（--accentBg）42%，var（--accentFg）42%）；背景重复：无重复，无重复，不重复，无反复；背景大小：1px 100%，20px 22px，20px 22 px，20px 100%；背景位置：右20px中心，右下，右下和右下；}选择：悬停{背景图像：线性梯度（var（--accentFg），线性梯度（-135度，透明50%，var（--accentFg）50%），线性梯度（-225度，透明50%，var（--accentFg）50%），线性梯度（var（--accentFg）42%，var（--accentBg）42%）；}选择：活动{背景图像：线性梯度（var（--accentFg），线性梯度（-135度，透明50%，var（--accentFg）50%），线性梯度（-225度，透明50%，var（--accentFg）50%），线性梯度（var（--accentFg）42%，var（--accentBg）42%）；颜色：var（--accentBg）；边框颜色：var（--accentFg）；背景色：var（--accentFg）；}<选择><option>这么多选项</option><选项></选项></选择><select class=“主题粉色”><option>这么多选项</option><选项></选项></选择><select class=“主题构建”><option>这么多选项</option><选项></选项></选择>
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
这对选定的元素使用了背景色，我删除了图像。。
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;}
对您可以通过标记名来设置任何HTML元素的样式，如下所示：
select {
font-weight: bold;
}
当然，您也可以像其他任何元素一样使用CSS类来设置其样式：
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
这是可能的，但不幸的是，根据开发人员的要求，大多数情况下都是基于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那样支持外观。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
