CSS 在选择框中填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10178233/
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
Padding in select boxes
提问by Brett
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
我知道选择框在使用 css 样式时有点麻烦，但是如果不使用高级技术，我是否可以添加一些填充来将文本向下推一点，而不会向右侧的箭头添加填充？
回答by Demilio
add this to your CSS class. Maybe this helps?
将此添加到您的 CSS 类。也许这有帮助？
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
回答by redolent
Since selectboxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
由于select框在不同浏览器尤其是操作系统上的显示方式不同，因此您无法保证一致性。
For example, the minimal amount of formatting I can do on a mac is this:
例如，我可以在 mac 上进行的最少格式化是这样的：
select { height:40px; background:transparent; }
And it looks like this:
它看起来像这样：
回答by Adam Reis
@Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
@Demilio 的答案非常适合隐藏默认选择框。使用自定义样式，您可以根据需要更改选择框的外观。
The only remaining problem is the arrows/caret which are also gone, as mentioned by @romainnm.
唯一剩下的问题是箭头/插入符号也不见了，正如@romainnm 所提到的。
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
不幸的是，伪元素（例如：after）不适用于 select 元素，因此唯一的解决方法是在 select 之后创建一个实际元素，例如<div class="Caret"></div>.
Add some stylying:
添加一些样式：
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
这应该会产生一个带有箭头的自定义样式的选择框：
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
不幸的是，唯一的缺点是单击箭头不会打开选择框，而且这似乎也无法用 JavaScript 解决。
回答by commonpike
Interesting test here http://cssdeck.com/labs/styling-select-box-with-css3
有趣的测试在这里 http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
作者覆盖了右侧的箭头并创建了自己的箭头，使用供应商前缀的 css 来定位不同的浏览器。这样做之后，你的填充就完全免费了。
