如何使用CSS 3自定义"选择"HTML表单元素？

Question

我不能改变选择HTML表单元素的大小而不会产生难看的结果,并且根据浏览器的不同而完全不同.

你知道一个像37 Signals那样的方法(遗憾的是只针对Webkit):http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

或者在FF/safari/Chrome(也许是IE ;-)上工作的任何方法/解决方法？

我创建了一个具有巨大元素的表单:容易拥有巨大的按钮或输入[文本],但到目前为止不可能与select一样.

谢谢 !

Answer 1

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

Answer 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;
}

图片预览: