如何使用 CSS 3 自定义“选择”HTML 表单元素？答案

【问题标题】：How to customize a "select" HTML form element with CSS 3?如何使用 CSS 3 自定义“选择”HTML 表单元素？
【发布时间】：2011-08-04 05:46:02
【问题描述】：

我无法更改所选 HTML 表单元素的大小而不会产生难看的结果，并且完全不同，具体取决于浏览器。

你知道像 37 Signals 那样的方法吗（不幸的是只适用于 Webkit）：http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

或任何适用于 FF/safari/Chrome（也许还有 IE ;-) 的方法/解决方法？

我创建了一个包含巨大元素的表单：很容易拥有巨大的按钮或输入[文本]，但到目前为止还不可能用 select 做同样的事情。

谢谢！

【问题讨论】：

嗯，像大多数其他表单元素一样，<select> 无法可靠地设置样式，因为它的默认外观源自浏览器的 GUI 或操作系统 GUI。也就是说，浏览器供应商选择他们想要的呈现方式。

标签： html forms css

【解决方案1】：

遗憾的是，跨浏览器和操作系统仍然无法可靠地实现这一点。 Way to go 实际上是一个基于 javascript 的模拟选择字段的解决方案。

【讨论】：

【解决方案2】：

你可以用这个 jQuery 设置你的选择框样式：

http://www.adamcoulombe.info/lab/jquery/select-box/

在不支持它的浏览器 (IE6) 中很容易实现和很好地降级（默认选择）。

jQuery 插件（包含在下载链接中）：

customSelect.jquery.js

Javascript：

$(document).ready(function(){
    $('select').customStyle();
});

CSS：

.customStyleSelectBox {
/* Styles For Your Select Box */
}

.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
background:url(canvas-list-nav-item-arrow-.gif) no-repeat center right;
}

图片预览：

【讨论】：

谢谢！我也会试试的:-)
你去@Zouzouwizman 怎么样？你觉得这个 jQuery 插件有用吗？

【解决方案3】：

不幸的是，CSS3 不包含任何用于设置<select> 框样式的额外功能。此外，任何使用 CSS 设置样式的尝试最终都会导致跨浏览器的杂乱无章。

要走的路是我过去使用过的 Javascript/jQuery，here's a jQuery one。如果用户关闭了 Javascript，它将默认为普通的 <select> 元素。

随意浏览满足您需求的解决方案，如果您还没有使用 jQuery，您可能需要一个普通的 Javascript 解决方案。

【讨论】：

非常感谢这个有用的答案！

【解决方案4】：

要隐藏选择箭头，您可以使用该解决方法

select {
    overflow:hidden;
    width: 120%;
}

【讨论】：