如何使用CSS设置<select>下拉列表的样式？</select>

时间：2009-12-13 03:33:56

标签： html css combobox cross-browser skinning

是否有一种仅限CSS的方式来设置<select>下拉列表的样式？

我需要尽可能多地设置<select>表单的样式，而不需要任何JavaScript。我可以在CSS中使用哪些属性？

此代码需要与所有主流浏览器兼容：

  • Internet Explorer 6,7和8
  • 火狐
  • Safari浏览器

我知道我可以使用JavaScript制作它：Example。

我不是在谈论简单的造型。我想知道，只有CSS才能做到最好。

我在Stack Overflow上找到了similar questions。

Doctype.com上的this one。

24 个答案:

答案 0 :(得分：925)

以下是3个解决方案：

解决方案＃1 - 外观：无 - 使用ie10-11解决方法（Demo）

要在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是一个问题 - 我们无法删除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用一个时髦的ie9选择器 至少撤消我们的自定义箭头 - 保留默认选择箭头。

/* 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;
  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>

此解决方案很简单，并且具有良好的浏览器支持 - 通常应该足够了。

如果需要浏览器支持ie9-和firefox 34-，请继续阅读......

解决方案＃2截断select元素以隐藏默认箭头（Demo）

(Read more here)

将select元素包含在固定宽度和overflow:hidden的div中。

然后为select元素提供比div 大约 20像素的宽度。

结果是select元素的默认下拉箭头将被隐藏（由于容器上的overflow:hidden），您可以在右侧放置您想要的任何背景图像 - div的手边。

此方法的优势是跨浏览器（Internet Explorer 8及更高版本，WebKit和Gecko）。然而，这种方法的缺点是选项下拉式在右侧突出（由我们隐藏的20个像素...因为选项元素占用了选择元素）。

enter image description here

[但是，应该注意的是，如果仅对 MOBILE 设备需要自定义选择元素 - 则上述问题不适用 - 因为每个手机本身打开选择的方式元件。所以对于移动设备，这可能是最好的解决方案。] 

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}
<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

如果在Firefox上需要自定义箭头 - Version 35之前 - 但您不需要支持旧版本的IE - 那么请继续阅读......

解决方案＃3 - 使用pointer-events属性（Demo）

(Read more here)

这里的想法是在原生下拉箭头上覆盖一个元素（以创建我们的自定义箭头），然后在其上禁止指针事件。

优势：在WebKit和Gecko中运行良好。它看起来也很好（没有突出option元素）

缺点： Internet Explorer（IE10及以下版本）不支持pointer-events，这意味着您无法点击自定义箭头。此外，此方法的另一个（显而易见的）缺点是您无法使用悬停效果或手形光标来定位新的箭头图像，因为我们刚刚在它们上禁用了指针事件！

但是，使用此方法，您可以使用Modernizer或条件注释使Internet Explorer恢复为标准内置箭头。

NB：由于Internet Explorer 10不再支持conditional comments：如果您想使用此方法，则应该使用 Modernizr 。但是，仍然可以使用描述为here的CSS hack从Internet Explorer 10中排除指针事件CSS。

.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(http://www.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]-->

答案 1 :(得分：226)

这是可能的，但不幸的是，在我们作为开发人员需要的程度上，大多数都是基于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 Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 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似乎不支持appearance以及Webkit。

答案 2 :(得分：58)

select元素及其下拉功能 难以设置样式。

Chris Heilmann的 {em> style attributes for select element 证实了Ryan Dohery在对第一个答案的评论中所说的话：

  

“选择元素是其中的一部分   操作系统，而不是浏览器chrome。因此，它非常   风格不可靠，尝试不一定有意义   无论如何“。

答案 3 :(得分：41)

我在设置选择下拉列表时注意到的最大不一致是 Safari 和 Google Chrome 呈现（Firefox可通过CSS完全自定义）。在通过互联网的晦涩深度搜索之后，我遇到了以下内容，它几乎完全解决了我对WebKit的疑虑：

Safari和Google Chrome修复：

select {
  -webkit-appearance: none;
}

然而，这会删除下拉箭头。您可以使用附近的div添加一个下拉箭头，背景为负边距或绝对位于选择下拉列表上。

* CSS property: -webkit-appearance 中提供了更多信息和其他变量。

答案 4 :(得分：34)

<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;
}

答案 5 :(得分：28)

我有这个确切的问题，除了我无法使用图像，并且不受浏览器支持的限制。这应该是«在规格上»并且运气开始在所有地方工作最终。

它使用分层旋转的背景图层来“剪切”一个下拉箭头，因为伪元素不适用于select元素。

编辑：在这个更新版本中，我使用的是CSS变量和一个微小的主题系统。

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}
<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

答案 6 :(得分：15)

这是一个适用于所有现代浏览器的版本。关键是使用appearance:none删除默认格式。由于所有格式都消失了，您必须在箭头中添加回来，以便在视觉上区分选择和输入。

工作示例：https://jsfiddle.net/gs2q1c7p/

＆＃13;
＆＃13; 
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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
＆＃13; 
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>
＆＃13;
＆＃13;
＆＃13;

答案 7 :(得分：13)

博客帖子 How to CSS form drop down style no 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>

答案 8 :(得分：11)

我使用Bootstrap来解决你的问题。这是最简单的解决方案：

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: 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+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}
<link href="https://maxcdn.bootstrapcdn.com/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>

注意：SVG中的base64内容为fa-chevron-down。

答案 9 :(得分：9)

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;}

答案 10 :(得分：9)

在现代浏览器中，在CSS中设置<select>的样式相对轻松。使用appearance: none时，唯一棘手的部分是替换箭头（如果这是你想要的）。这是一个使用带有纯文本SVG的内联data: URI的解决方案：

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>

其余样式（边框，填充，颜色等）非常简单。

这适用于我刚试过的所有浏览器（Firefox 50，Chrome 55，Edge 38和Safari 10）。关于Firefox的一个注意事项是，如果您想在数据URI中使用#字符（例如fill: #000），则需要将其转义（fill: %23000）。

答案 11 :(得分：7)

使用clip属性裁剪边框和select元素的箭头，然后将自己的替换样式添加到包装器中：

    <!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>

使用零不透明度的第二个选项使按钮可单击：

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

Webkit和其他浏览器之间的坐标不同，但@media query可以涵盖这一点。

<强>参考

答案 12 :(得分：4)

使用:after和:before执行此操作的一个非常好的示例是 Styling Select Box with CSS3 | CSSDeck

答案 13 :(得分：4)

是。您可以按标签名称设置任何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>

答案 14 :(得分：4)

不推荐编辑此元素，但如果您想尝试它，就像任何其他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>

答案 15 :(得分：3)

从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

答案 16 :(得分：3)

这是基于我在讨论中最喜欢的想法的解决方案。这允许直接样式化元素而无需任何额外的标记。

使用IE10 +安全回退IE8 / 9。这些浏览器的一个警告是背景图像必须定位并且足够小以隐藏在原生扩展控件之后。

HTML 

$data['process'] = $this->getProcesses(); //function that gets process available for the country
$data['category'] = $this->getCategories(); //function that gets all categories
$this->load->view('includes/template', $data);

SCSS 

<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>

Codepen

http://codepen.io/ralgh/pen/gpgbGx

答案 17 :(得分：3)

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;
}

这为选择元素使用背景颜色，我删除了图像..

答案 18 :(得分：3)

有一种方法可以设置SELECT标签的样式。

如果有＆＃34;尺寸＆＃34;标签中的参数，几乎所有CSS都适用。使用这个技巧，我创建了一个实际上相当于普通选择标记的小提琴，加上可以像可视语言中的ComboBox一样手动编辑值（除非你把 readonly 在输入标签中。）

所以，这是一个看到背后原理的最小例子：
（你需要点击机制的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>

这里有更多风格的小提琴： https://jsfiddle.net/dkellner/7ac9us70/

（当然，这只是为了证明其可能性。）

注意标签如何不像通常那样封装属于它们的选项;是的，这是故意的，它是造型的。 （有礼貌的方式可以减少很多样式。）是的，他们确实以这种方式完美地运作。

在任何人指出NO-JS部分之前：我知道问题是＆＃34;没有Javascript＆＃34;。对我而言，这更像是请不要打扰插件，我知道他们可以做到但我需要原生的方式。理解，没有插件，没有额外的脚本，只有适合标签的内容＆＃34; onclick＆＃34;。唯一的依赖是jQuery，以避免本机＆＃34; document.parentNode.getElementsByTagName＆＃34;疯狂。但它可以这样工作。所以是的，这是一个带有原生样式和一些onclick处理程序的原生选择标记。它显然不是＆＃34; Javascript解决方案＆＃34;。

享受！

答案 19 :(得分：3)

你绝对应该像在 Styling select, optgroup and options with CSS 中那样做。在许多方面，背景颜色和颜色正是您通常需要的样式选项，而不是整个选择。

答案 20 :(得分：1)

Danield的答案（https://stackoverflow.com/a/13968900/280972）中的第二种方法可以改进，以处理悬停效果和其他鼠标事件。只需确保＆＃34;按钮＆＃34; -element紧跟在标记中的select元素之后。然后使用+ css-selector：

进行定位

HTML：

<select class="select-input">...</select>
<div class="select-button"></div>

CSS：

.select-input:hover+.select-button {
    [hover styles here]
}

然而，这将显示悬停在select元素上方的任何位置时的悬停效果，而不仅仅是＆＃34;按钮＆＃34;。

我将此方法与Angular结合使用（因为我的项目恰好是Angular-app），覆盖整个select元素，让Angular在＆中显示所选选项的文本＃34;按钮＆＃34; - 元素。在这种情况下，将鼠标悬停在选择范围内的任何位置时都适用悬浮效果。但是，如果没有javascript，它就无法工作，所以如果你想这样做，并且你的网站必须在没有javascript的情况下工作，你应该确保你的脚本添加了增强所需的元素和类。这样，没有javascript的浏览器只会获得正常的，没有样式的选择，而不是没有正确更新的样式徽章。

答案 21 :(得分：1)

您还可以在下拉列表中添加悬停样式。

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}
<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

答案 22 :(得分：0)

CSS＆amp;仅HTML解决方案

我似乎与Chrome，Firefox和＆ IE11。但请留下您对其他网络浏览器的反馈意见。

正如@Danield回答所建议的那样，我将我的选择包装在一个div中（甚至两个div用于x-browser兼容性）以获得预期的行为。

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>

注意2 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 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;
}

答案 23 :(得分：0)

自定义选择CSS样式

在 IE（10，11），Edge，FF，Chrome 中进行了测试 

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}
<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

相关问题
最新问题