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


1333

是否有仅CSS方式来设置<select>下拉菜单样式?

我需要在<select>不使用任何JavaScript的情况下尽可能地样式化表单。我可以在CSS中使用哪些属性?

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

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

我知道我可以使用JavaScript实现:Example

我不是在谈论简单的样式。我想知道,仅CSS可以做得最好。

我在堆栈溢出中发现了类似的问题

这个在Doctype.com上。


1
没有对谷歌只有JS解决方案相比,发现有
Jitendra维亚斯

41
我认为这是一个合理的问题,但答案是“不,不是真的”或“不是您想要的方式”。但是没人(我俩都不是)对此有100%的把握,这种模棱两可的感觉蔓延到读者的皮肤下,问题的合法性受到质疑。
ZJR

1
@Jitendra,我知道你的意思。如果您的问题更明确,我们将不胜感激。另外,我想我找到了您想要的东西。这是实验性的,但请查看:cappuccino.org/aristo/showcase
jeremyosborne

1
@jeremyosborne-感谢您的回复。我知道我可以用javascript做到。您的eaxmple链接基于JS。为什么我问这个问题是因为我想知道,是否有人知道我们只能用CSS做什么?
Jitendra Vyas 2009年

@Jitendra感谢您更新问题。使用约束(仅CSS,没有JS)可以可靠地做到最好的就是修改字体(字体),背景和前景(文本)颜色,边框大小,外观和颜色,位置和大小(通常通过类型)通过字体设置)。即使那样,您可能仍需要做一些调整以确保所有浏览器的外观相同。我希望我知道比这更好的答案,也许我错过了一个答案,但是我不这么认为。
jeremyosborne

Answers:


1027

这是三个解决方案:

解决方案#1-外观:无-使用Internet Explorer 10-11解决方法(演示

-

要隐藏在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 11(及更高版本)和Firefox 34(及更高版本)除外。

我们可以改进此技术,并通过添加以下内容来添加对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;
    }
}

全部一起:

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


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

解决方案#2截断选择元素以隐藏默认箭头(demo

-

(在这里阅读更多)

select固定宽度和的div 将元素包装overflow:hidden

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

结果是该select元素的默认下拉箭头将被隐藏(由于overflow:hidden容器上的),并且您可以将所需的任何背景图像放置在div的右侧。

这种方法的优势在于它是跨浏览器(Internet Explorer 8和更高版本,WebKitGecko)。但是,这种方法的缺点是,选项下拉菜单在右侧突出(被我们隐藏的20个像素...,因为选项元素采用选择元素的宽度)。

在此处输入图片说明

[然而,应该注意的是,如果自定义选择元素仅对于移动设备是必需的,那么上述问题就不适用,因为每部电话都会以本机方式打开选择元素。因此,对于移动设备,这可能是最好的解决方案。]


如果在Firefox(版本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从Internet Explorer 10中排除指针事件CSS 。


1
这两种方法中哪种最适合您?
Jitendra Vyas

3
这取决于设计要求。如果您可以选择下拉菜单,那么这是最好的,因为它是跨浏览器(IMO allbrowsers + IE8 +可以被视为跨浏览器),但我认为很多人都不会这样做。因此,实际上,在上面的声明中,我的意思是方法2是最好的。
Danield 2012年

4
另外,我发布的小提琴使用了带有条件语句的方法2,以允许IE使用其默认箭头。
Danield 2012年

3
@AlexisLeclerc固定div并选择相同的宽度仅在-webkit浏览器(例如Chrome)中有效。(因为我包括了规则-webkit-appearance:none;)但是,这在其他浏览器(例如firefox
不起作用

4
如果我可以对方法1提出改进建议,我个人会感到缺乏边界或右侧缺少选择光晕非常烦人。我用当前项目中使用的一些东西更新了您的小提琴:jsfiddle.net/YvCHW/1745。告诉我你的想法!
Alexis Leclerc

233

这是可能的,但不幸的是,大多数情况下,在开发人员需要的程度上基于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属性,它可以更改元素的行为。

appearance似乎可以在几乎所有基于WebKit的浏览器中完美运行,包括移动浏览器,尽管Gecko似乎不像WebKit 那样受支持。


4
嘿,我注意到从Firefox 12开始选择框的外观非常不同(它看起来很像Chrome的(我有Mac)),而且FF 12似乎还支持更多外观属性。
CWSpear 2012年

3
一种仅适用于Chrome的解决方案...我也不会为此付费,我的客户也不会。有关X浏览器解决方案,请参见@Dianeld的答案。
Adrien Be

41
@AdrienBe我的解决方案是在3年前提出的;当时,这是在不涉及JavaScript库或插件的情况下重新设置选择框样式的唯一合理方法。如果您决定删除带前缀的属性,它仍然可行,但是它仅在基于Webkit的浏览器(也包括Safari,新的Opera + Android)中可靠地工作。目前,也许有更好的解决方案,所以与其添加无意义的评论,不如投票赞成您认为更好的解决方案,并在将来检查“已答复”日期。谢谢。
马修·莫瑞克

4
@MatthewMorek:甚至在3年前,还有一个更好的解决方案。对于跨浏览器的支持,Daniel的答案要好得多(它支持IE8和更高版本,WebKit和Gecko)。该问题确实询问“代码必须与所有主要浏览器兼容:Internet Explorer 6,7和8,Firefox和Safari”。不过,Paul Sweatte可能已在2013年添加了此x浏览器要求。
Adrien Be

3
如果添加text-indent: 0.01px; text-overflow: "";,它将更好地工作
Ivan

64

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

克里斯·海尔曼(Chris Heilmann)的 select元素样式属性证实了Ryan Dohery在对第一个答案的评论中所说的话:

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


47

我遇到了这个确切的问题,除了我不能使用图像并且不受浏览器支持的限制。这应该是“规范的”,运气好的话,最终可以在任何地方开始工作。

它使用分层的旋转背景层来“切出”下拉箭头,因为伪元素对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>


5
哇,这是我所见过的最酷的解决方案之一。它适用于Mac上最新版本的Chrome和Safari。其他浏览器怎么样?
Tintin81 '17

2
在Firefox中为我工作,另外还有-moz-appearance: none;
Zac,

45

在样式选择下拉列表时,我注意到的最大不一致是SafariGoogle Chrome呈现(Firefox可通过CSS完全自定义)。经过对Internet的晦涩深度的搜索后,我发现以下内容几乎可以完全解决WebKit的问题:

Safari和Google Chrome浏览器修复

select {
  -webkit-appearance: none;
}

但是,这确实删除了下拉箭头。您可以使用附近div带有背景,负边距或绝对位于所选下拉菜单上方的箭头来添加下拉箭头。

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


1
不要忘了在那之后添加您的样式;)但是,我很高兴今天阅读了此评论。
teewuane 2012年

1
您能否详细说明一下:“ Firefox是可以通过CSS完全自定义的”,对我来说,似乎Firefox不支持外观属性...那么在Firefox中如何做到这一点?
Danield 2012年

36

<select>标签可以通过CSS设置样式,就像在浏览器中呈现的HTML页面上的任何其他HTML元素一样。下面是一个(过于简单的)示例,它将在页面上放置一个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;
}

30
令人惊讶的是,我第一次看到“母亲”涉足互联网而没有粗鲁之举。为此+1!
BaL 2012年

34
这个答案不能解决这个问题。它仅设置选择输入的样式,而不显示下拉菜单的样式
Kyborek

14
这个答案完全忽略了为下拉列表设计样式以实现跨浏览器一致性的挑战。这是一个非常省力的答案。
BentOnCoding 2015年

18

博客文章How to CSS form drop down style没有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>


17

这是适用于所有现代浏览器的版本。关键是使用appearance:none删除默认格式。由于所有格式均已消失,因此您必须重新添加箭头,以可视方式将选择内容与输入内容区分开。

工作示例: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+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/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>


16

我了解到您使用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>

注意:base64内容fa-chevron-down在SVG中。


12

在现代浏览器中,<select>用CSS 设置样式相对容易。随着appearance: none唯一棘手的部分是替换箭头(如果这就是你想要的)。这是使用data:带有纯文本SVG 的内联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)。


1
您还可以在标签上使用height和/或width属性<svg>(而不是CSS属性)来调整SVG的大小background-size
gitaarik

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

在当前的Chrome浏览器中无法选择任何内容。
Vitaly Zdanevich '18

8

使用该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查询可以解决此问题。

参考文献


1
至少在chrome中对我来说效果不错:position:absolute; 剪辑:rect(2px 85px 128px 2px); z索引:2;padding-left:18px; padding-right:18px;边距:7px自动; 颜色:#555; font-size:继承; 背景色:透明;
BrianFreud 2012年

1
我发现裁剪箭头仅能在IE7中完成一半,因为您无法控制选择边框。
CpILL 2012年


1
@PaulSweatte,哇,这是你的第20个死灵法师!恭喜。您还对我的所有询问都表示了满意金死灵法师徽章
Nemo

8

自定义选择CSS样式

Internet Explorer(10和11),Edge,Firefox和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>


适应性稍强(但尚未在所有浏览器中进行过测试):background-position: right 15px center, right 10px center;
Robin Stewart


5

不建议编辑此元素,但是如果您想尝试的话,它就像其他任何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>

2
@MikkoP:建议编辑时,请提供更具描述性的编辑摘要吗?对于我们的审阅者而言,“改进消息”作为高级摘要并没有很大帮助。谢谢。
让·弗朗索瓦·科贝特

1
@Jean-FrançoisCorbett我将尝试更加具体:)
MikkoP 2012年

1
您不能设置选项元素的样式(请参见以下SO答案:stackoverflow.com/a/7208814/703717
Danield 2012年

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

这将背景色用于选择元素,因此我删除了图像。


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>

6
我不是在说这样的事,我想将下拉箭头更改为其他内容
Jitendra Vyas 09-12-13

5
您无法将下拉箭头设置为其他图像的样式,该图像由操作系统控制。如果确实需要,最好的选择是使用DHTML下拉小部件。
Ryan Doherty,2009年

3
您只能通过CSS更改CSS属性。您可以更改其边距,填充,字体属性,背景颜色等。如果要使其外观完全不同,则基本上必须在运行时通过JavaScript将其替换为图形(如果做得很好,这不是一个糟糕的解决方案) )。
戴夫·沃德

4

这是基于本次讨论中我最喜欢的想法的解决方案。这允许直接对<select>元素进行样式设置,而无需任何其他标记。

它可以在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



3

有一个简单的方法。

检查这个小提琴,并原谅我过分的风格: https

背后的窍门:一旦<select>标记获得名为“ size”的属性,它将表现为固定高度的列表,并且由于某种原因,突然间,您可以使用它来设置地狱的样式。现在严格来说,固定列表是一个副作用-但这只是对我们有所帮助,因为我们将其用于“下拉外观”。

一个最小的例子:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</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="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(为简单起见,我使用jQuery完成了此操作-但如果没有它,您也可以这样做)

旁注

  • 该解决方案不仅为您提供选择:还可以手动编辑该值。如果您喜欢默认的选择限制方式,请使用readonly属性。

  • 为了最大程度地提高样式可能性,<optgroup>标记不在其子级周围,因此。这是有意的,在视觉上更清晰,而且他们很乐意像这样工作,不用担心。

  • Javascripts:是的,我知道OP表示“ no Javascript”,但我理解它,因为 请不要理会插件,这很好。您不需要任何库。正如我所说的,甚至没有jQuery,这只是为了使示例清晰。



2

您还可以在下拉菜单中添加悬停样式。

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>


2

Danield答案中的第三种方法可以进行改进,以处理悬停效果和其他鼠标事件。只需确保“按钮”元素紧接在标记中的select元素之后即可。然后使用+ CSS选择器将其定位:

HTML:

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

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

但是,当将鼠标悬停在选择元素上而不是“按钮”上的任何位置时,将显示悬停效果。

我将这种方法与Angular结合使用(因为我的项目无论如何都是Angular应用程序),以覆盖整个select元素,然后让Angular在“ button”元素中显示所选选项的文本。在这种情况下,将鼠标悬停在所选内容上的任何位置时都具有悬停效果是很有意义的。

但是,如果没有JavaScript,它就无法工作,因此,如果您要这样做,并且您的站点必须没有JavaScript,则应确保您的脚本添加了增强功能所必需的元素和类。这样,没有JavaScript的浏览器将只获得普通的,无样式的选择,而不是样式标记无法正确更新。


1
我很想知道任何拒绝投票的原因,所以我知道如何改善!🙂–
阿德里安·施密特

1

仅CSS和HTML的解决方案

它似乎与Chrome,Firefox和Internet Explorer 11兼容。但是,请留下您对其他Web浏览器的反馈。

正如Danield的答案所建议的那样,我将选择内容包装在一个div中(对于x-browser兼容性,甚至是两个div),以得到预期的行为。

参见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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.