CSS -- 如何使用 css 为选择框设置外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7082257/
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 -- How to skin a select box with css
提问by Tim Lieberman
I've been trying to skin a select box with css to make a custom form. I've been able to successfully do with firefox but chrome and safari have some extra parts to it not allowing me to do it.
我一直在尝试使用 css 为选择框设置外观以制作自定义表单。我已经能够成功地使用 Firefox，但是 chrome 和 safari 有一些额外的部分，不允许我这样做。
回答by Ry-
Set an appearence: noneand you can do almost anything with it: https://jsfiddle.net/CUA9p/1475/
设置一个appearence: none，你几乎可以用它做任何事情：https: //jsfiddle.net/CUA9p/1475/
body {
background-color: #fef;
margin: 2em;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
background-color: #103;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px);
border: 1px solid white;
border-radius: 2px;
box-shadow: 0 0 0 2px #103, 0 3px 0 2px #649;
color: white;
font-family: sans-serif;
font-style: italic;
margin: 2px;
outline: none;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
text-transform: lowercase;
width: 100px;
}<select>
<option>Hello</option>
<option>World</option>
</select>Also take a look at this: http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
也看看这个：http: //danielneumann.com/blog/how-to-style-dropdown-with-css-only/
回答by Michael
Here's a great site that will keep all your form elements looking consistent. http://formalize.me/
这是一个很棒的网站，可以让您的所有表单元素看起来一致。http://formalize.me/
回答by mysterious
i dnt think it is possible with css alone..cause select box is a control that is browser specific.. you will have to use javascript or jquery.
我不认为单独使用 css 是可能的..因为选择框是一个特定于浏览器的控件..你将不得不使用 javascript 或 jquery。
