如何在不使用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下拉式样时注意到的最大不一致是SafariGoogle 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

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

在现代浏览器中,对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浏览器的兼容性),以获得预期的行为。

请参阅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添加放置向下箭头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".

请享用!

Interesting Posts