如何将 CSS 应用于 Mac Chrome 选择框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23040305/
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
How to apply CSS to a Mac Chrome Select Box?
提问by Solomon Closson
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-topand padding-bottomof 5pxon a selectelement, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
无论我做什么，使用 Mac OSX 10.9.2 和 Chrome 版本 33.0.1750.152, padding, background-color, 都不起作用。我真的只是想在一个元素上应用 apadding-top和padding-bottomof ，在 MAC OSX 上除了 Chrome 之外的任何地方都可以使用。是什么赋予了？如何在所有平台上全局执行此操作？5pxselect
回答by Kevin Lynch
You need to apply -webkit-appearance:none;when adding CSS to select elements in webkit browsers.
-webkit-appearance:none;在webkit浏览器中添加CSS选择元素时需要应用。
回答by Almog_0
There is better option to achieve a natural design:
有更好的选择来实现自然设计：
height:30px;
background:#ffffff;
p.s
ps
Vector's answer is hiding the arrows on the right side.
Vector 的答案是隐藏右侧的箭头。
回答by pconnor88
Add the following property to your select in your css file:
将以下属性添加到您的 css 文件中的选择中：
-webkit-appearance:none;
回答by Marko Milivojevic
If you are using bootstrap, you can add class custom-select:
如果您使用的是bootstrap，则可以添加 class custom-select：
<select class="form-control custom-select">
After adding it, you can eventually adjust height by adding line-heightproperty to css:
添加后，您最终可以通过向line-heightcss添加属性来调整高度：
select {
line-height: 1.3;
}
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
回答by RuiVBoas
This solution is not only for selectbut also for inputand textarea.
此解决方案不仅适用于select而且适用于input和textarea。
select,
textarea,
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
I also applied the solution for all browsers, so it should work the same way everywhere.
我还为所有浏览器应用了该解决方案，因此它在任何地方都应该以相同的方式工作。
!importantdid the trick for me, but it will depend if you will need it or not.
!important对我有用，但这取决于您是否需要它。
