在Safari和firefox上<select>框样式差异？</select>

Question

我试图简单地设置我的选择框样式，使文本居中对齐。它适用于Firefox但不适用于Safari或Chrome。在Chrome中检查元素时，它表示文本居中，但情况并非如此。任何人都可以看到为什么它不在Chrome和Safari中心？

http://georgewoolfe.com/yogurtline1.html

Answer 1

它无效。你最好的是使用一个插件。 E.g选择菜单：http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

实际上用span替换了select但保留了select功能。

Answer 2

好吧，样式标签真的很难。您必须测试不同的浏览器和操作系统，几乎不会达到统一的结果。

http://bavotasan.com/2011/style-select-box-using-only-css/

如果您想以更简单的方式设置样式，我建议您使用一些模拟选择行为的替代组件或js替换。

http://cssglobe.com/custom-styling-of-the-select-elements/

Answer 3

没有完全跨浏览器的方式使用css将<select>元素的测试居中。有些浏览器允许你这样做，有些则不允许。

如果你真的必须让它居中，那么我建议您考虑使用其他组件，例如Select2或Chosen。