如何仅使用 CSS 设置 <select> 下拉菜单的样式？
是否有一种仅 CSS 的方式来设置 <select> 下拉菜单的样式？
我需要尽可能人性化地设置 <select> 表单的样式，而不需要任何 JavaScript。我可以在 CSS 中使用哪些属性来做到这一点？
这段代码需要兼容所有主流浏览器：
Internet Explorer 6、7 和 8
火狐
苹果浏览器
我知道我可以使用 JavaScript：Example。
而且我不是在谈论简单的样式。我想知道，我们只能用 CSS 做的最好的事情。
我在 Stack Overflow 上找到了 similar questions。
以及 Doctype.com 上的 this one。
以下是三个解决方案：
解决方案 #1 - 外观：无 - 使用 Internet Explorer 10 - 11 解决方法 (Demo)
--
要隐藏选择元素上的默认箭头集 appearance: none，然后使用 background-image 添加您自己的自定义箭头
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
浏览器支持：
appearance: none 具有非常好的浏览器支持 (caniuse) - Internet Explorer 除外。
我们可以改进此技术并添加对 Internet Explorer 10 和 Internet Explorer 11 的支持，方法是添加
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% no-repeat #EEE； } /* 注意：Internet Explorer 黑客攻击 */ select::-ms-expand { display: none; /* 删除 Internet Explorer 10 和 11 中的默认箭头 */ } /* 目标 Internet Explorer 9 以撤消自定义箭头 */ @media screen and (min-width:0\0) { select { background: none\9;填充：5px\9； } }
这个解决方案很简单并且有很好的浏览器支持——它通常就足够了。
如果需要 Internet Explorer 的浏览器支持，请提前阅读。
解决方案 #2 截断选择元素以隐藏默认箭头 (demo)
--
将 select 元素包裹在具有 固定宽度 和 overflow:hidden 的 div 中。
然后将 select 元素的宽度设置为比 div 大 20 像素。
结果是 select 元素的默认下拉箭头将被隐藏（由于容器上的 overflow:hidden），您可以在 div 的右侧放置您想要的任何背景图像.
这种方法的优势是它是跨浏览器（Internet Explorer 8 及更高版本、WebKit 和 Gecko）。但是，这种方法的缺点是选项下拉菜单在右侧突出（我们隐藏的 20 个像素...因为选项元素占用了选择元素）。
https://i.stack.imgur.com/Wyf6w.png
[然而，应该注意的是，如果自定义选择元素仅对移动设备是必需的 - 那么上述问题不适用 - 因为每部手机本机打开选择元素的方式。所以对于手机来说，这可能是最好的解决方案。]
.styled 选择 { 背景：透明；宽度：150px；字体大小：16px；边框：1px 实心#CCC；高度：34px； } .styled { 边距：50px;宽度：120px；高度：34px；边框：1px 实心#111；边框半径：3px；溢出：隐藏；背景：url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE； }
如果在 Firefox 上需要自定义箭头 - 在 Version 35 之前 - 但您不需要支持旧版本的 Internet Explorer - 然后继续阅读...
解决方案 #3 - 使用 pointer-events 属性 (demo)
--
这里的想法是在本机下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后禁止其上的指针事件。
优点：在 WebKit 和 Gecko 中运行良好。它看起来也不错（没有突出 option 元素）。
缺点： Internet Explorer（Internet Explorer 10 及以下版本）不支持 pointer-events，这意味着您无法点击自定义箭头。此外，此方法的另一个（明显）缺点是您不能使用悬停效果或手形光标来定位新箭头图像，因为我们刚刚禁用了它们的指针事件！
但是，通过这种方法，您可以使用 Modernizer 或条件注释使 Internet Explorer 恢复为标准的内置箭头。
注意：由于 Internet Explorer 10 不再支持 conditional comments：如果您想使用这种方法，您可能应该使用 Modernizr。但是，仍然可以使用描述的 CSS hack here 从 Internet Explorer 10 中排除指针事件 CSS。
.notIE { 位置：相对；显示：内联块； } 选择 { 显示：内联块；高度：30px；宽度：150px；大纲：无；颜色：#74646E；边框：1px 实心#C8BFC4；边框半径：4px；盒子阴影：插入 1px 1px 2px #DDD8DC;背景：#FFF； } /* 选择箭头样式 */ .notIE .fancyArrow { width: 23px;高度：28px；位置：绝对；显示：内联块；顶部：1px；右：3px；背景：网址（https://stackoverflow.com/favicon.ico）正确/90％无重复#FFF；指针事件：无； } /*目标 Internet Explorer 9 和 Internet Explorer 10:*/ @media screen and (min-width: 0\0) { .notIE .fancyArrow { display: none; } }
这是可能的，但不幸的是，在我们开发人员需要的范围内，主要是在基于 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 箭头，在标签前后放置一些间距，几乎任何您想要的东西。
最重要的部分是 appearance 属性，它改变了元素的行为方式。
它在几乎所有基于 WebKit 的浏览器中都能完美运行，包括移动浏览器，尽管 Gecko 似乎不像 WebKit 那样支持 appearance。
我遇到了这个确切的问题，除了我不能使用图像并且不受浏览器支持的限制。这应该是“符合规格”的，幸运的是最终开始在任何地方工作。
它使用分层的旋转背景层来“剪切”下拉箭头，因为伪元素不适用于选择元素。
编辑：在这个更新版本中，我使用 CSS 变量和一个小型主题系统。
:root { --radius: 2px; --baseFg：暗灰色； --baseBg：白色； --accentFg: #006fc2; --accentBg: #bae1ff; } .theme-pink { --radius: 2em; --baseFg: #c70062; --baseBg：#ffe3f1； --accentFg: #c70062; --accentBg: #ffaad4; } .theme-construction { --radius: 0; --baseFg：白色； --baseBg：黑色； --accentFg：黑色； --accentBg：橙色； } 选择 { 字体：400 12px/1.3 sans-serif; -webkit 外观：无；外观：无；颜色：var（--baseFg）；边框：1px 实心 var(--baseFg);行高：1；大纲：0；填充：0.65em 2.5em 0.55em 0.75em；边界半径：var（--radius）；背景颜色：var（--baseBg）；背景图像：线性渐变（var（--baseFg），var（--baseFg）），线性渐变（-135deg，透明50％，var（--accentBg）50％），线性渐变（-225deg , 透明 50%, var(--accentBg) 50%), 线性渐变(var(--accentBg) 42%, var(--accentFg) 42%);背景重复：不重复，不重复，不重复，不重复；背景尺寸：1px 100%、20px 22px、20px 22px、20px 100%；背景位置：右20px中心，右下，右下，右下； } 选择：悬停 { 背景图像：线性渐变（var（--accentFg），var（--accentFg）），线性渐变（-135deg，透明 50%，var（--accentFg）50%），线性-梯度(-225deg, 透明 50%, var(--accentFg) 50%), 线性梯度(var(--accentFg) 42%, var(--accentBg) 42%); } 选择：活动 { 背景图像：线性渐变（var（--accentFg），var（--accentFg）），线性渐变（-135deg，透明 50%，var（--accentFg）50%），线性-梯度(-225deg, 透明 50%, var(--accentFg) 50%), 线性梯度(var(--accentFg) 42%, var(--accentBg) 42%);颜色：var（--accentBg）；边框颜色：var（--accentFg）；背景颜色：var（--accentFg）； }
选择元素及其下拉功能很难设置样式。
Chris Heilmann 的 style attributes for select element 证实了 Ryan Dohery 在对第一个答案的评论中所说的话：
“select元素是操作系统的一部分，而不是浏览器chrome。因此，它的样式非常不可靠，无论如何尝试也不一定有意义。”
在样式选择下拉菜单时，我注意到最大的不一致是 Safari 和 Google Chrome 呈现（Firefox 可通过 CSS 完全自定义）。在互联网的一些模糊深度搜索后，我发现了以下内容，这几乎完全解决了我对 WebKit 的疑虑：
Safari 和 Google Chrome 修复：
select {
-webkit-appearance: none;
}
但是，这确实会删除下拉箭头。您可以使用附近的 div 添加下拉箭头，该箭头具有背景、负边距或绝对定位在选择下拉菜单上。
*更多信息和其他变量可在 CSS property: -webkit-appearance 中找到。
<select> 标记可以通过 CSS 设置样式，就像在浏览器中呈现的 HTML 页面上的任何其他 HTML 元素一样。下面是一个（过于简单的）示例，它将在页面上放置一个选择元素并将选项的文本呈现为蓝色。
示例 HTML 文件 (selectExample.html)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
示例 CSS 文件 (selectExample.css)：
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
自定义选择 CSS 样式
在 Internet Explorer（10 和 11）、Edge、Firefox 和 Chrome 中测试
选择::-ms-expand { 显示：无； } 选择 { 显示：内联块； box-sizing：边框框；填充：0.5em 2em 0.5em 0.5em；边框：1px 实心#eee；字体：继承；行高：继承； -webkit 外观：无； -moz 外观：无； -ms-外观：无；外观：无；背景重复：不重复；背景图像：线性渐变（45度，透明50％，当前颜色50％），线性渐变（135度，当前颜色50％，透明50％）；背景位置：右 15px 上 1em，右 10px 上 1em；背景尺寸：5px 5px，5px 5px； }
这是适用于所有现代浏览器的版本。关键是使用 appearance:none 删除默认格式。由于所有格式都消失了，因此您必须添加回箭头，以在视觉上区分选择与输入。
工作示例：https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) { -webkit-appearance: none; -moz 外观：无；背景位置：右 50%；背景重复：不重复； background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);填充：0.5em； padding-right: 1.5em } #mySelect {border-radius: 0 }
博客文章 How to CSS form drop down style no JavaScript 对我有用，但它在 Opera 中失败了：
选择{边框：0无；颜色：#FFFFFF；背景：透明；字体大小：20px；字体粗细：粗体；填充：2px 10px；宽度：378px； *宽度：350像素； *背景：#58B14C； } #mainselection { 溢出：隐藏；宽度：350 像素； -moz-边框半径：9px 9px 9px 9px； -webkit-border-radius：9px 9px 9px 9px；边框半径：9px 9px 9px 9px；盒子阴影：1px 1px 11px #330033;背景： url("arrow.gif") 不重复滚动 319px 5px #58B14C; }
我使用 Bootstrap 处理了您的案例。这是最简单的解决方案：
select.form-control { -moz-appearance：无； -webkit 外观：无；外观：无；背景位置：右中心；背景重复：不重复；背景大小：1ex；背景来源：内容框； background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDw vbWV0YWRhdGE+++Cjwvc3ZnPgo="); }
注意：base64 的东西在 SVG 中是 fa-chevron-down。
在现代浏览器中，在 CSS 中设置 <select> 的样式相对容易。使用 appearance: none 唯一棘手的部分是替换箭头（如果这是您想要的）。这是一个使用带有纯文本 SVG 的内联 data: URI 的解决方案：
选择{-moz-外观：无； -webkit 外观：无；外观：无；背景重复：不重复；背景大小：0.5em 自动；背景位置：右 0.25em 中心；填充权：1em；背景图像： url("数据：图像/svg+xml;charset=utf-8, \ "); }
其余的样式（边框、填充、颜色等）相当简单。
这适用于我刚刚尝试过的所有浏览器（Firefox 50、Chrome 55、Edge 38 和 Safari 10）。关于 Firefox 的一个注意事项是，如果您想在数据 URI 中使用 # 字符（例如 fill: #000），您需要对其进行转义（fill: %23000）。
原生解决方案
这是一个简单的 HTML/CSS 示例：
https://jsfiddle.net/dkellner/e1jdspvb/
诀窍：由于某种原因，当您将 size 属性赋予选择标记时，它会突然理解 CSS。通常，此属性用于创建始终可见的固定高度列表，但作为副作用，您现在可以完全摆脱它的样式。所以我们所做的就是给它一个大小，然后实现它的显示/隐藏机制以恢复下拉的感觉。
最小版本，不像示例那样时尚但更容易理解：
<style>
.stylish > span {position:relative;}
.stylish select {position:absolute;left:0px;transform:scaleY(0);transform-origin:top center;}
.stylish.dropped-down select {transform:scaleY(1);}
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick = "this.closest('div').classList.toggle('dropped-down');"><br>
<select onclick = "this.closest('div').classList.remove('dropped-down');"
onchange = "this.closest('div').querySelector('input').value=this.value;"
size=9
>
<optgroup label="Fantasy"></optgroup>
<option value="gandalf"> Gandalf </option>
<option value="harry"> Harry Potter </option>
<option value="jon"> Jon Snow </option>
...
</select>
</span>
</div>
旁注
这实际上实现了一个可编辑的下拉菜单；使用 readonly 避免编辑
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 元素一样。
编辑示例：
/* 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>
使用 clip 属性裁剪 select 元素的边框和箭头，然后将您自己的替换样式添加到包装器中：
使用不透明度为零的第二个选择使按钮可点击：
Webkit 和其他浏览器之间的坐标不同，但 @media query 可以涵盖这一点。
参考
Dojo FX 测试：dojox.fx.ext-dojo.complex
CSS Masking：使用 rect 函数测试剪辑属性并将自动值剪辑到边框框
Styling Select Box with CSS3 | CSSDeck 中有一个很好的例子，它使用 :after 和 :before 来达到目的
是的。您可以通过标签名称设置任何 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>
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;
}
这对选择元素使用背景颜色，我删除了图像..
这是基于此讨论中我最喜欢的想法的解决方案。这允许直接设置
它适用于 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
从 Internet Explorer 10 开始，您可以使用 ::-ms-expand 伪元素选择器来设置和隐藏下拉箭头元素的样式。
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
其余样式应与其他浏览器类似。
Here is a basic fork of Danield's jsfiddle that applies support for IE10
您还可以在下拉列表中添加悬停样式。
选择{位置：相对；向左飘浮;宽度：21.4%；高度：34px；背景：#f9f9e0；边框：1px 实心 #41533f;填充：0px 10px 0px 10px；颜色：#41533f;边距：-10px 0px 0px 20px；背景：透明；字体大小：12px； -webkit 外观：无； -moz 外观：无；外观：无；背景：url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;} select:hover {背景：url(https://alt- fit.com/images/global/select-button.png) 100% / 15% 无重复 #fff;}
Danield's answer 中的第三种方法可以改进以处理悬停效果和其他鼠标事件。只需确保“按钮”元素紧跟在标记中的选择元素之后。然后使用 + CSS 选择器定位它：
HTML：
<select class="select-input">...</select>
<div class="select-button"></div>
CSS：
.select-input:hover+.select-button {
<Hover styles here>
}
但是，这将在悬停在选择元素上的任何位置时显示悬停效果，而不仅仅是在“按钮”上。
我将此方法与 Angular 结合使用（因为无论如何我的项目恰好是一个 Angular 应用程序），以覆盖整个选择元素，并让 Angular 在“按钮”元素中显示所选选项的文本。在这种情况下，将鼠标悬停在选择上的任何位置时应用悬停效果是非常有意义的。
但是，如果没有 JavaScript，它就无法工作，因此如果您想这样做，并且您的网站必须在没有 JavaScript 的情况下工作，您应该确保您的脚本添加了增强所需的元素和类。这样，没有 JavaScript 的浏览器将简单地获得一个普通的、无样式的选择，而不是一个不能正确更新的有样式的徽章。
仅 CSS 和 HTML 的解决方案
它似乎与 Chrome、Firefox 和 Internet Explorer 11 兼容。但请留下您对其他网络浏览器的反馈。
正如 Danield's answer 所建议的，我将我的选择包装在一个 div 中（甚至两个 div 以实现 x 浏览器兼容性）以获得预期的行为。
See http://jsfiddle.net/bjap2/
HTML：
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
注意两个 div 包装器。
还要注意添加的额外 div 以将向下箭头按钮放置在您喜欢的任何位置（绝对定位），这里我们将其放在左侧。
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。
background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%); }