选择选项填充在 chrome 中不起作用

Question

选择选项填充在 chrome 中不起作用

<style>
select option { padding:5px 0px; }
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

原文由 Piyush Marvaniya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚找到了一种将填充应用于 chrome 中的选择输入的方法

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 5px;
}

似乎适用于当前的 chrome 39.0.2171.71（64 位）和 safari（我只在 mac 上测试过）。

这似乎删除了添加到选择输入的默认样式（它也删除了下拉箭头），但允许您使用自己的样式而无需 chrome 覆盖它。

我在使用此处的代码时偶然发现了此修复程序：http: //fettblog.eu/style-select-elements/

原文由 rmmoul 发布，翻译遵循 CC BY-SA 3.0 许可协议