select选项填充不工作在铬

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

我只是find了一种方法来将填充应用于chrome中的selectinput

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

似乎在目前的铬39.0.2171.71（64位）和safari（我只在Mac上testing这个）工作。

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

我在使用这里的代码的时候偶然发现了这个修补程序： http : //fettblog.eu/style-select-elements/

看起来

不幸的是，webkit浏览器还不支持选项标签的样式。

你可能在这里find类似的问题

使用最广泛的跨浏览器解决scheme是使用ul li

希望能帮助到你！

非常，非常简单的想法，但你可以相应地修改它。这不是看起来不错，只是提供这个想法。希望能帮助到你。

CSS：

 ul { width: 50px; height: 20px; border: 1px solid black; display: block; } li { padding: 5px 0px; width: 50px; display: none; }

HTML：

 <ul id="customComboBox"> &nbsp <li>Test</li> <li>Test 2</li> <li>Test 3</li> </ul>

脚本：

 $(document).ready(function(){ $("#customComboBox").click(function(){ $("li").toggle("slow"); }); });

DEMO

这不是option的工作，因为它是一个“系统”生成的下拉菜单，但你可以设置一个select的padding 。

只需重新设置box-sizing属性到CSS中的content-box 。

select的默认值是border-box 。

 select { box-sizing: content-box; padding: 5px 0; }

推文本的小黑客，工作真的很好。

 select { text-indent:5px; }

如果需要，您可以使用font-size属性作为选项。

你应该select你的CSS而不是select选项。

 select { padding: 10px; margin: 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }

查看本文样式使用CSS3select框以获取更多样式选项。