如何将 CSS 应用到 Mac Chrome 选择框？

Posted 2023-03-06

【中文标题】如何将 CSS 应用到 Mac Chrome 选择框？

【英文标题】：How to apply CSS to a Mac Chrome Select Box?

【发布时间】：2014-05-27 05:52:43

【问题描述】：

不管我做什么，使用 Mac OSX 10.9.2 和 Chrome 版本 33.0.1750.152、padding、background-color，没有任何效果。我真的只是想在select 元素上应用padding-top 和padding-bottom 的5px，在MAC OSX 上除了Chrome 之外的任何地方都可以使用。是什么赋予了？如何在所有平台上全局执行此操作？？

【参考方案1】：

在 webkit 浏览器中添加 CSS 以选择元素时，您需要应用 -webkit-appearance:none;。

演示http://jsfiddle.net/XxkSC/3830/

【讨论】：

哇，这也适用于任何其他浏览器吗？还是只是 Chrome？我的意思是，其他浏览器也有这个前缀吗？

好的，但我想要选择框中的箭头，但只想添加填充。 -webkit-appearance: none 删除了选择框的箭头，但是如何找回呢？

你可以使用背景图片 TUTORIAL bavotasan.com/2011/style-select-box-using-only-css

谢谢，我会这么做的！

更好的答案在这个线程中：***.com/questions/2966855/…

【参考方案2】：

有更好的选择来实现自然的设计：

height:30px;
background:#ffffff;

DEMO JSFiddle

附言

Vector 的答案是隐藏右侧的箭头。

【讨论】：

哦，哇，所以填充不起作用，但是高度和边框可以吗？！看起来很随意..

【参考方案3】：

将以下属性添加到您的 css 文件中的选择中：

-webkit-appearance:none;

【讨论】：

好的，但我想要选择框中的箭头，但只想添加填充。 -webkit-appearance: none 删除了选择框的箭头，但是如何找回呢？

@Almog_0 answer 修复箭头问题。

【参考方案4】：

如果你使用bootstrap，你可以添加类custom-select：

<select class="form-control custom-select">

添加后，最终可以通过在css中添加line-height属性来调整高度：

select 
    line-height: 1.3;

https://getbootstrap.com/docs/4.1/components/input-group/#custom-select

【参考方案5】：

此解决方案不仅适用于select，也适用于input 和textarea。

select,
textarea,
input 
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;

我还为所有浏览器应用了该解决方案，因此它应该在任何地方都以相同的方式工作。

!important 帮了我大忙，但这取决于你是否需要它。