CSS 自定义下拉选择适用于所有浏览器 IE7+ FF Webkit
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18092123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Custom Dropdown Select that works across all browsers IE7+ FF Webkit
提问by Faz Ya
I would like to make a custom dropdown that works across all the browsers. I created one here but the arrow is not clickable. If I set it as the background for the select, then firefox will overwrite an arrow on top of it. Can someone tell me what's the best technique to get a custom looking dropdown that works across all the browsers and how do I make that knob clickable without Javascript?
我想制作一个适用于所有浏览器的自定义下拉菜单。我在这里创建了一个，但箭头不可点击。如果我将其设置为选择的背景，那么 Firefox 将覆盖其顶部的箭头。有人可以告诉我获得适用于所有浏览器的自定义外观下拉菜单的最佳技术是什么，以及如何在没有 Javascript 的情况下使该旋钮可点击？
CSS:
CSS：
#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 32px;
border: 1px solid #000;
width: 260px;
text-indent: 8px;
}
.arrow {
cursor: pointer;
height: 32px;
width: 24px;
position: absolute;
right: 0px;
background-color: #c8c8c8;
background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}<span style="position:relative;">
<span class="arrow" ></span>
<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
</select>
</span>回答by drjorgepolanco
This is very simple, you just need to add a background image to the select element and position it where you need to, but don't forget to add:
这很简单，您只需要在 select 元素中添加背景图像并将其放置在您需要的位置，但不要忘记添加：
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
According to http://shouldiprefix.com/#appearance
根据http://shouldiprefix.com/#appearance
Microsoft Edge and IE mobile support this property with the -webkit- prefix rather than -ms- for interop reasons.
出于互操作的原因，Microsoft Edge 和 IE mobile 支持使用 -webkit- 前缀而不是 -ms- 的此属性。
I just made this fiddle http://jsfiddle.net/drjorgepolanco/uxxvayqe/
回答by Mainak Bhattacharjee
As per Link: http://bavotasan.com/2011/style-select-box-using-only-css/there are lot of extra rework that needs to be done(Put extra div and position the image there. Also the design will break as the option drilldown will be mis alligned to the the select.
根据链接：http: //bavotasan.com/2011/style-select-box-using-only-css/有很多额外的返工需要完成（放置额外的 div 并将图像定位在那里。还有设计将中断，因为选项向下钻取将与选择错误对齐。
Here is an easy and simple way which will allow you to put your own dropdown image and remove the browser default dropdown.(Without using any extra div). Its cross browser as well.
这是一个简单而简单的方法，它允许您放置自己的下拉图像并删除浏览器默认下拉列表。（不使用任何额外的 div）。它的跨浏览器也是如此。
HTML
HTML
<select class="dropdown" name="drop-down">
<option value="select-option">Please select...</option>
<option value="Local-Community-Enquiry">Option 1</option>
<option value="Bag-Packing-in-Store">Option 2</option>
</select>
CSS
CSS
select.dropdown {
margin: 0px;
margin-top: 12px;
height: 48px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #666666;
padding: 9px;
font-family: tescoregular;
font-size: 16px;
color: #666666;
-webkit-appearance: none;
-webkit-border-radius: 0px;
-moz-appearance: none;
appearance: none;
background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
background-size: 11px 7px;
}
回答by lokers
You might check Select2plugin:
您可能会检查Select2插件：
http://ivaynberg.github.io/select2/
http://ivaynberg.github.io/select2/
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
Select2 是一个基于 jQuery 的选择框替代品。它支持搜索、远程数据集和无限滚动结果。
It's quite popular and very maintainable. It should cover most of your needs if not all.
它非常受欢迎并且非常易于维护。如果不是全部，它应该可以满足您的大部分需求。
回答by sboisse
The pointer-eventscould be useful for this problem as you would be able to put a div over the arrow button, but still be able to click the arrow button.
的pointer-events可能是这个问题非常有用，你将能够把一个div上的箭头按钮，但仍然可以单击箭头按钮。
The pointer-eventscss makes it possible to click through a div.
该pointer-eventsCSS能够通过一个div点击。
This approach will not work for IE versions older than IE11, however. You could something working in IE8 and IE9 if the element you put on top of the arrow button is an SVGelement, but it will be more complicated to style the button the way you want proceeding like this.
但是，这种方法不适用于 IE11 之前的 IE 版本。如果您放在箭头按钮顶部的SVG元素是一个元素，则您可以在 IE8 和 IE9 中使用某些东西，但是按照您想要的方式设置按钮样式会更复杂。
Here a Js fiddle example: http://jsfiddle.net/e7qnqzx6/2/
这里有一个 Js 小提琴示例：http: //jsfiddle.net/e7qnqzx6/2/
回答by HumbleGeek
I was also having a similar problem. Finally found one solution at https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers
我也遇到了类似的问题。终于在https://techmeals.com/fe/questions/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers找到了一个解决方案
Note:
笔记：
1) For Firefox support there is special CSS handling for SELECT element's parent, please take a closer look.
1) 对于 Firefox 支持，SELECT 元素的父元素有特殊的 CSS 处理，请仔细查看。
2) Download the down.png from Down.png
CSS code
CSS代码
/* For Firefox browser we need to style for SELECT element parent. */
@-moz-document url-prefix() {
/* Please note this is the parent of "SELECT" element */
.select-example {
background: url('https://techmeals.com/external/images/down.png');
background-color: #FFFFFF;
border: 1px solid #9e9e9e;
background-size: auto 6px;
background-repeat: no-repeat;
background-position: 96% 13px;
}
}
/* IE specific styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
select.my-select-box {
padding: 0 0 0 5px;
}
}
/* IE specific styles */
@supports (-ms-accelerator:true) {
select.my-select-box {
padding: 0 0 0 5px;
}
}
select.my-select-box {
outline: none;
background: #fff;
-moz-appearance: window;
-webkit-appearance: none;
border-radius: 0px;
text-overflow: "";
background-image: url('https://techmeals.com/external/images/down.png');
background-size: auto 6px;
background-repeat: no-repeat;
background-position: 96% 13px;
cursor: pointer;
height: 30px;
width: 100%;
border: 1px solid #9e9e9e;
padding: 0 15px 0 5px;
padding-right: 15px; /* This will be apllied only to IE 7, IE 8 and IE 9 as */
*padding-right: 15px; /* This will be apllied only to IE 7 and below. */
_padding-right: 15px; /* This will be apllied only to IE 6 and below. */
}
HTML code
HTML代码
<div class="select-example">
<select class="my-select-box">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
<option value="4">Fourth Option</option>
</select>
</div>
回答by Yorh Ekin
<select class="dropdownmenu" name="drop-down">
<option class="dropdownmenu_list1" value="select-option">Choose ...</option>
<option class="dropdownmenu_list2" value="Topic 1">Option 1</option>
<option class="dropdownmenu_list3" value="Topic 2">Option 2</option>
</select>
This works best in Firefox. Too bad that Chrome and Safari do not support this rather easy CSS styling.
这在 Firefox 中效果最好。可惜 Chrome 和 Safari 不支持这种相当简单的 CSS 样式。
