CSS 与 Select 元素的跨浏览器兼容性答案

【问题标题】：CSS cross browser compatibility with Select elementCSS 与 Select 元素的跨浏览器兼容性
【发布时间】：2012-02-06 16:33:55
【问题描述】：

我有一个带有以下 CSS 的表单 select 元素：

    border:solid 0 #000;
    background: transparent url("../images/input_fld.png") no-repeat;
    height:42px;
    width:275px;
    padding-left:10px;
    padding-right:0px;
    font-family: monospace;

这会生成这样的选择框：

Webkit

莫兹

我该如何解决这个问题？

我尝试为 IE 添加这个：

<!--[if IE]>
<style>
form select {padding-bottom:10px;}
</style>
<![endif]-->

虽然这确实解决了文本底部对齐的问题，但它也引入了向下箭头向上推 10 像素的问题。

【问题讨论】：

在跨浏览器和跨操作系统的情况下为表单元素设置样式是极其困难的。我认为如果您完全必须设置它们的样式，那么最好使用 JS 替换（但要确保它是可访问的）。这是一篇关于表单控件样式的好文章：456bereastreet.com/archive/200701/…
您可能想看看 Formalize.me (formalize.me)。或许你能从中找到一些想法。

标签： html css cross-browser

【解决方案1】：

如果您不反对使用 JQuery 插件，可以尝试使用 http://www.verot.net/jquery_select_skin.htm。您必须对其进行一些样式设置，但这相当简单。

该插件不支持 IE6，但我相信这总是最好的 :) 另外，尝试在 CSS 中添加行高，等于选择框的高度，在本例中为 42 像素。

希望这会有所帮助。

【讨论】：