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

How do I style a <select> dropdown with only CSS?

提问by Jitendra Vyas

Is there a CSS-only way to style a <select>dropdown?

是否有仅 CSS 样式的<select>下拉列表样式？

I need to style a <select>form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?

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

This code needs to be compatible with all major browsers:

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

• Internet Explorer 6, 7, and 8
• Firefox
• Safari

• Internet Explorer 6、7 和 8
• 火狐
• 苹果浏览器

I know I can make it with JavaScript: Example.

我知道我可以使用 JavaScript: Example。

And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.

我不是在谈论简单的样式。我想知道，我们只用 CSS 能做的最好的事情是什么。

I found similar questionson Stack Overflow.

我在 Stack Overflow 上发现了类似的问题。

And this oneon Doctype.com.

而这一次在Doctype.com。

采纳答案by Danield

Here are three solutions:

以下是三种解决方案：

Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)

解决方案 #1 - 外观：无 - 使用 Internet Explorer 10 - 11 解决方法（演示）

--

——

To hide the default arrow set appearance: noneon the select element, then add your own custom arrow with background-image

要隐藏在appearance: noneselect 元素上设置的默认箭头，请添加您自己的自定义箭头background-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

Browser Support:

浏览器支持：

appearance: nonehas very good browser support (caniuse) - except for Internet Explorer 11 (and later) and Firefox 34 (and later).

appearance: none具有非常好的浏览器支持 ( caniuse) - 除了 Internet Explorer 11（及更高版本）和 Firefox 34（及更高版本）。

We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding

我们可以改进此技术并通过添加对 Internet Explorer 10 和 Internet Explorer 11 的支持

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.

如果 Internet Explorer 9 是一个问题，我们无法删除默认箭头（这意味着我们现在有两个箭头），但是，我们可以使用一个时髦的 Internet Explorer 9 选择器。

To at least undo our custom arrow - leaving the default select arrow intact.

至少撤消我们的自定义箭头 - 保持默认选择箭头完好无损。

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0
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: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>
) {
    select {
        background: none;
        padding: 5px;
    }
}
) {
    select {
        background-image:none;
        padding: 5px;
    }
}

All together:

全部一起：

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

This solution is easy and has good browser support - it should generally suffice.

这个解决方案很简单，并且有很好的浏览器支持——它通常就足够了。

---

---

If browser support for Internet Explorer 9 (and later) and Firefox 34 (and later) is necessary then keep reading...

如果需要浏览器支持 Internet Explorer 9（及更高版本）和 Firefox 34（及更高版本），请继续阅读...

Solution #2 Truncate the select element to hide the default arrow (demo)

解决方案#2 截断 select 元素以隐藏默认箭头（演示）

--

——

(Read more here)

（在这里阅读更多）

Wrap the selectelement in a div with a fixed widthand overflow:hidden.

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

Then give the selectelement a width of about 20 pixels greater than the div.

然后给select元素一个比 div 大大约20 个像素的宽度。

The result is that the default drop-down arrow of the selectelement will be hidden (due to the overflow:hiddenon the container), and you can place any background image you want on the right-hand-side of the div.

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

The advantageof this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantageof this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).

这种方法的优点是它是跨浏览器的（Internet Explorer 8 和更高版本、WebKit和Gecko）。但是，这种方法的缺点是选项下拉列表在右侧突出（我们隐藏了 20 个像素......因为选项元素占据了选择元素的宽度）。

[It should be noted, however, that if the custom select element is necessary only for mobiledevices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]

[然而，应该注意的是，如果自定义 select 元素仅对移动设备是必需的- 那么上述问题不适用 - 因为每部手机本机打开 select 元素的方式。因此，对于移动设备，这可能是最佳解决方案。]

.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
<!--[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]-->
) {
  .notIE .fancyArrow {
    display: none;
  }
}

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

---

---

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

如果在 Firefox 上需要自定义箭头 -版本 35之前- 但您不需要支持旧版本的 Internet Explorer - 然后继续阅读...

Solution #3 - Use the pointer-eventsproperty (demo)

解决方案 #3 - 使用pointer-events属性（演示）

--

——

(Read more here)

（在这里阅读更多）

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 optionelements).

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

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!

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

However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.

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

NB:Being that Internet Explorer 10 doesn't support conditional commentsanymore: 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.

注意：由于 Internet Explorer 10 不再支持conditional comments：如果您想使用这种方法，您可能应该使用Modernizr。但是，仍然可以使用此处描述的 CSS hack 从 Internet Explorer 10 中排除指针事件 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>

回答by Matthew Morek

It is possible, but unfortunately mostly in WebKit-based browsers to the extent we, as developers, require. Here is the example of CSS styling gathered from Chrome options panel via built-in developer tools inspector, improved to match currently supported CSS properties in most modern browsers:

这是可能的，但不幸的是，在我们作为开发人员需要的范围内，主要是在基于 WebKit 的浏览器中。以下是通过内置开发人员工具检查器从 Chrome 选项面板收集的 CSS 样式示例，经过改进以匹配大多数现代浏览器中当前支持的 CSS 属性：

select {
  -webkit-appearance: none;
}

When you run this code on any page within a WebKit-based browser it should change the appearance of the select box, remove standard OS-arrow and add a PNG-arrow, put some spacing before and after the label, almost anything you want.

当您在基于 WebKit 的浏览器中的任何页面上运行此代码时，它应该会更改选择框的外观，删除标准 OS 箭头并添加一个 PNG 箭头，在标签前后放置一些间距，几乎任何您想要的。

The most important part is appearanceproperty, which changes how the element behaves.

最重要的部分是appearance属性，它改变了元素的行为方式。

It works perfectly in almost all WebKit-based browser, including mobile ones, though Gecko doesn't support appearanceas well as WebKit, it seems.

它在几乎所有基于 WebKit 的浏览器中都能完美运行，包括移动浏览器，尽管 Gecko 似乎不支持appearanceWebKit。

回答by pavium

The select element and its dropdown feature aredifficult to style.

选择元素及其下拉功能是很难的风格。

style attributes for select elementby Chris Heilmann confirms what Ryan Dohery said in a comment to the first answer:

Chris Heilmann 的select 元素的样式属性证实了 Ryan Dohery 在对第一个答案的评论中所说的话：

"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."

“select 元素是操作系统的一部分，而不是浏览器 chrome。因此，它的样式非常不可靠，无论如何尝试也不一定有意义。”

回答by Henrik

I had this exact problem, except I couldn't use images and was not limited by browser support. This should be ?on spec? and with luck start working everywhere eventually.

我有这个确切的问题，除了我不能使用图像并且不受浏览器支持的限制。这应该是？在规格上？幸运的是，最终可以开始在任何地方工作。

It uses layered rotated background layers to ?cut out? a dropdown arrow, as pseudo-elements wouldn't work for the select element.

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

Edit:In this updated version I am using CSS variables and a tiny theming system.

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

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

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

回答by ioTus

The largest inconsistency I've noticed when styling select dropdowns is Safariand Google Chromerendering (Firefox is fully customizable through CSS). After some searching through obscure depths of the Internet I came across the following, which nearly completely resolves my qualms with WebKit:

在样式选择下拉列表中，我注意到的最大不一致是Safari和Google Chrome渲染（Firefox 可通过 CSS 完全自定义）。在对互联网的晦涩深度进行了一些搜索之后，我发现了以下内容，这几乎完全解决了我对 WebKit 的疑虑：

Safari and Google Chrome fix:

Safari 和 Google Chrome 修复：

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

This does, however, remove the dropdown arrow. You can add a dropdown arrow using a nearby divwith a background, negative margin or absolutely positioned over the select dropdown.

但是，这确实删除了下拉箭头。您可以使用div带有背景、负边距或绝对定位在选择下拉列表上的附近添加下拉箭头。

*More information and other variables are available in CSS property: -webkit-appearance.

*更多信息和其他变量在CSS 属性中可用： -webkit-appearance。

回答by jeremyosborne

<select>tags can be styled through CSS just like any other HTML element on an HTML page rendered in a browser. Below is an (overly simple) example that will position a select element on the page and render the text of the options in blue.

<select>标签可以通过 CSS 设置样式，就像在浏览器中呈现的 HTML 页面上的任何其他 HTML 元素一样。下面是一个（过于简单的）示例，它将在页面上放置一个选择元素并将选项的文本呈现为蓝色。

Example HTML file (selectExample.html):

示例 HTML 文件 (selectExample.html)：

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

Example CSS file (selectExample.css):

示例 CSS 文件 (selectExample.css)：

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
}

回答by Daniel

The blog post How to CSS form drop down style no JavaScriptworks for me, but it fails in Operathough:

博客文章How to CSS form drop down style no JavaScript对我有用，但它在Opera 中失败了：

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

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=");
}

回答by Eric

Here is a version that works in all modern browsers. The key is using appearance:nonewhich removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input.

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

Working example: https://jsfiddle.net/gs2q1c7p/

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

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

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

回答by Yajo

I got to your case using Bootstrap. This is the simplest solution that works:

我使用Bootstrap 处理了您的情况。这是最简单的解决方案：

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

##代码##

Note: the base64 stuff is fa-chevron-downin SVG.

注意：base64 的东西fa-chevron-down在 SVG 中。

回答by Kevin Christopher Henry

In modern browsers it's relatively painless to style the <select>in CSS. With appearance: nonethe only tricky part is replacing the arrow (if that's what you want). Here's a solution that uses an inline data:URI with plain-text SVG:

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

##代码## ##代码##

The rest of the styling (borders, padding, colors, etc.) is fairly straightforward.

其余的样式（边框、填充、颜色等）相当简单。

This works in all the browsers I just tried (Firefox 50, Chrome 55, Edge 38, and Safari 10). One note about Firefox is that if you want to use the #character in the data URI (e.g. fill: #000) you need to escape it (fill: %23000).

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