如何在不使用JavaScript的情况下使用CSS设置<select>下拉菜单？
是否有一个CSS样式的<select>下拉菜单？
我需要尽可能人性地devise一个<select>表单，而不需要任何JavaScript。 我可以在CSS中使用哪些属性？
此代码需要与所有主stream浏览器兼容：
- Internet Explorer 6,7和8
- 火狐
- 苹果浏览器
我知道我可以使用JavaScript： 例如 。
我不是在谈论简单的造型。 我想知道，我们只能用CSS做什么最好的。
我发现堆栈溢出类似的问题 。
而这个在Doctype.com上。
这里有3个解决scheme：
解决scheme＃1 – 外观：无 – 与ie10-11解决方法（ 演示 ）
要隐藏select元素的默认箭头集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 ） – ie11-和firefox除外34-
我们可以通过增加这个技术来增加对ie10和ie11的支持
select::-ms-expand { display: none; /* hide the default arrow in ie10 and ie11 */ }
如果ie9是一个问题 – 我们没有办法去除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用时髦的ie9select器来至less撤消我们的自定义箭头 – 保留默认select箭头完整。
/* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background-image:none\9; padding: 5px\9; } }
全部一起：
select { margin: 50px; border: 1px solid #111; background: transparent; width: 150px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee; } /* CAUTION: IE hackery ahead */ select::-ms-expand { display: none; /* remove default arrow in IE 10 and 11 */ } /* target Internet Explorer 9 to undo the custom arrow */ @media screen and (min-width:0\0) { select { background:none\9; padding: 5px\9; } }
<select> <option>Apples</option> <option selected>Pineapples</option> <option>Chocklate</option> <option>Pancakes</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(..http://img.dovov.comselect-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */ background-image: url(..http://img.dovov.comselect-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */ background-image: url(..http://img.dovov.comselect-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/ background-image: url(..http://img.dovov.comselect-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ background-image: url(..http://img.dovov.comselect-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的浏览器的任何页面上运行这个代码时，它应该改变select框的外观，删除标准的OS箭头，并添加一个PNG箭头，在标签前后放一些间距，几乎任何你想要的。
最重要的部分是appearance属性，它改变了元素的行为。
它几乎在所有基于Webkit的浏览器（包括移动浏览器）中都能很好地工作，尽pipeGecko不像Webkit那样支持appearance 。
select元素及其下拉特征很难风格化。
克里斯·海尔曼（Chris Heilmann） 对select元素的风格属性证实了瑞安·多利（Ryan Dohery）在第一个回答的评论中所说的话：
“select元素是操作系统的一部分，而不是浏览器的一部分，因此风格是非常不可靠的，无论如何也不一定有意义。
我在select下拉式样时注意到的最大不一致是Safari和Google Chrome渲染（Firefox可以通过CSS完全自定义）。 在通过互联网的深度search之后，我发现了下面的内容，几乎完全解决了WebKit的问题：
Safari和Google Chrome修复 ：
select { -webkit-appearance: none; }
这样做，但是，删除下拉箭头。 您可以添加一个下拉箭头使用附近的背景，负边距的div或绝对定位在select下拉菜单。
*更多信息和其他variables在CSS属性中可用：-webkit-appearance 。
就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样， <select>标签可以通过CSS进行样式化。 下面是一个（过于简单）的示例，它将在页面上放置一个select元素，并将选项的文本呈现为蓝色。
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表单下拉样式没有JavaScript适用于我，但它在Opera中失败：
select { border: 0 none; color: #FFFFFF; background: transparent; font-size: 20px; font-weight: bold; padding: 2px 10px; width: 378px; *width: 350px; *background: #58B14C; } #mainselection { overflow: hidden; width: 350px; -moz-border-radius: 9px 9px 9px 9px; -webkit-border-radius: 9px 9px 9px 9px; border-radius: 9px 9px 9px 9px; box-shadow: 1px 1px 11px #330033; background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C; } <div id="mainselection"> <select> <option>Select an Option</option> <option>Option 1</option> <option>Option 2</option> </select> </div>
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元素。 用你最喜欢的颜色replace«hotpink» – 我使用一个variables。
select { font: 400 12px/1.3 "Helvetica Neue", sans-serif; -webkit-appearance: none; appearance: none; border: 1px solid hotpink; line-height: 1; outline: 0; color: hotpink; border-color: hotpink; padding: 0.65em 2.5em 0.55em 0.75em; border-radius: 3px; background: linear-gradient(hotpink, hotpink) no-repeat, linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat, linear-gradient(hotpink, hotpink) no-repeat; background-color: white; background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%; background-position: right 20px center, right bottom, right bottom, right bottom; }
<select> <option>So many options</option> <option>...</option> </select>
如果风格是一个重要的问题，使用一个完全自定义的小工具可能会有所帮助，就像在博客文章重塑CSS和jQuery的下拉菜单中描述的那样。
这是一个适用于所有现代浏览器的版本。 关键是使用appearance:none删除默认格式。 由于所有的格式都没有了，所以你必须重新添加箭头，以便从input中区分select。
工作示例： https ： //jsfiddle.net/gs2q1c7p/
select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; background-position: right 50%; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=); padding: .5em; padding-right: 1.5em } #mySelect { border-radius: 0 }
<select id="mySelect"> <option>Option 1</option> <option>Option 2</option> </select>
我使用Bootstrap来处理你的情况。 这是最简单的解决scheme：
select.form-control { -moz-appearance: none; -webkit-appearance: none; appearancce: none; background-position: right center; background-repeat: no-repeat; background-size: 1ex; background-origin: content-box; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB+PC+Cjwvc3ZnPgo="); }
<link href="ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <section class="container"> <form class="form-horizontal"> <select class="form-control"> <option>One</option> <option>Two</option> </select> </form> </section>
是。 您可以通过其标签名称来设置HTML元素的样式，如下所示：
select { font-weight: bold; }
当然，你也可以使用CSS类来devise它，就像其他的元素一样：
<select class="important"> <option>Important Option</option> <option>Another Important Option</option> </select> <style type="text/css"> .important { font-weight: bold; } </style>
使用clip属性裁剪select元素的边框和箭头，然后将自己的replace样式添加到包装器中：
<!DOCTYPE html> <html> <head> <style> select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; } body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; } </style> </head> <span> <select> <option value="">Alpha</option> <option value="">Beta</option> <option value="">Charlie</option> </select> </span> </html>
不build议编辑这个元素，但是如果你想尝试它就像其他任何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>
一个非常好的例子，使用:after和:before做的伎俩是在样式select框与CSS3 | CSSDeck
你绝对应该像CSS样式select，optgroup和选项一样 。 在很多方面，背景颜色和颜色正是您通常需要的样式选项，而不是整个select。
从Internet Explorer 10开始，可以使用::-ms-expand伪元素select器来设置和隐藏下拉箭头元素。
select::-ms-expand { display:none; /* or visibility: hidden; to keep it's space/hitbox */ }
其余的样式应该与其他浏览器类似。
这是Danield的jsfiddle的一个基本分支，它支持IE10
这里有一个基于我最喜欢的讨论的解决scheme。 这允许直接对元素进行样式化，而不需要任何额外的标记。
工程IE10 +与IE8 / 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("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 IE10+ // IE 8/9 get dafault arrow which covers caret image // as long as caret image is small than and positioned // behind default arrow select::-ms-expand { display: none; }
Codepen
在现代浏览器中，对CSS中的<select>进行风格devise是相对容易的。 随着appearance: none唯一棘手的部分是取代箭头（如果这是你想要的）。 下面是一个使用纯文本SVG的内联data: URI的解决scheme：
select { -moz-appearance: none; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-size: 0.5em auto; background-position: right 0.25em center; padding-right: 1em; background-image: url("data:image/svg+xml;charset=utf-8, \ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \ <polygon points='0,0 60,0 30,40' style='fill:black;'/> \ </svg>"); }
<select> <option>Option 1</option> <option>Option 2</option> </select> <select style="font-size: 2rem;"> <option>Option 1</option> <option>Option 2</option> </select>
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元素的背景颜色，我删除了图像..
仅CSS和HTML解决scheme
我似乎与Chrome，Firefox和IE11兼容。 但请留下您对其他网页浏览器的反馈意见。
正如@Danield的答案所示，我把我的select包装在一个div中（即使是两个div，以实现x浏览器的兼容性），以获得预期的行为。
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>
注意2 div封装。 另外注意额外的div添加放置向下箭头button，无论你喜欢（绝对定位），在这里，我们把它放在左边。
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 hidding the default-provided browser arrow */ padding-left: 13px; margin-left: 0; border: none; background: none; /* margin-top & margin-bottom must be set since some browser 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; }
Danield答案（ https://stackoverflow.com/a/13968900/280972 ）中的第二种方法可以改进，以使用hover效果和其他鼠标事件。 只要确保“button”元素正好在标记中的select元素之后。 然后使用+ cssselect器来定位它：
HTML：
<select class="select-input">...</select> <div class="select-button"></div>
CSS：
.select-input:hover+.select-button { [hover styles here] }
但是，如果将鼠标hover在select元素的任意位置上，而不仅仅是“button”上方，则会显示hover效果。
我将这种方法与Angular结合使用（因为我的项目恰好是一个Angular-app），以覆盖整个select元素，并让Angular在“button”元素中显示所选选项的文本。 在这种情况下，hover效果适用于hover在select区域上的任何地方。 它不工作没有JavaScript，所以如果你想要做到这一点，你的网站必须没有JavaScript的工作，你应该确保你的脚本添加了增强所需的元素和类。 这样，一个没有javascript的浏览器就会得到一个正常的，没有风格的select，而不是一个没有正确更新的风格的徽章。
有一种方法来设置SELECT标签的样式。
如果标签中有一个“size”参数，几乎所有的CSS都会被应用。 使用这个技巧，我创build了一个实际上等同于正常select标签的小提琴，并且可以像在视觉语言中的combobox一样手动编辑该值（除非将其只读为input标签）。
所以这里有一个最小的例子来看看背后的原理：
（你需要jQuery的点击机制） ：
<style> /* only these 2 lines are truly required */ .stylish span {position:relative;} .stylish select {position:absolute;left:0px;display:none} /* now you can style the hell out of them */ .stylish input { ... } .stylish select { ... } .stylish option { ... } .stylish optgroup { ... } </style> ... <div class="stylish"> <label> Choose your superhero: </label> <span> <input onclick="$(this).closest('div').find('select').slideToggle(110)"> <br> <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());"> <optgroup label="Fantasy"></optgroup> <option value="gandalf">Gandalf</option> <option value="harry">Harry Potter</option> <option value="jon">Jon Snow</option> <optgroup label="Comics"></optgroup> <option value="tony">Tony Stark</option> <option value="steve">Steven Rogers</option> <option value="natasha">Natasha Romanova</option> </select> </span> </div>
Here's the fiddle with some more styles: https://jsfiddle.net/dkellner/7ac9us70/
(It's overstyled of course, just to demonstrate the possibilities.)
Notice how tags don't encapsulate the options belonging under them as they normally should; yes this is intentional, it's for the styling. (The well-mannered way would be a lot less stylable.) And yes they do work perfectly well this way.
Before anyone points out the NO-JS part: I know the question said "no Javascript". To me, this is more like please don't bother with plugins, I know they can do it but I need the native way . Understood, no plugins, no extra scripts included, only what fits inside a tag's "onclick". The only dependency is jQuery, to avoid the native "document.parentNode.getElementsByTagName" madness. But it can work that way. So yes, this is a native select tag with native styling and some onclick handlers. It's clearly not "a Javascript solution".
请享用！
