图形化选择框

Question

我一直在寻找一种跨浏览器定制表单选择框的方法。

我对输入框执行此操作没有问题，但选择框似乎有点棘手。

最终，我希望通过css使选择框透明，并在其周围的div中添加一个背景图像，这与我编写输入框的方式类似

<div class="contact-input">
 <input type="text" class="contact-text" name="name" placeholder="Name">
</div>

.contact-input{width:247px;height:48px;background:url('../images/contact-inputbg.png') no-repeat;}
.contact-text{width:217px;height:25px;margin:11px 0 0 11px;background:transparent;border:0;font:16px Arial, Helvetica, sans-serif;color:#a3a3a3;}

Answer 1

网页Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements展示了如何使用JS和一些CSS来实现带样式的select, checkbox, and radio字段。此外，您使用的输入字段不必包装在<label>标记中，因此这适用于FormTools。

Answer 2

你不能只用CSS来做这件事(样式选择有很多问题，特别是它的文本颜色)，但是有一点JS的帮助，你可以改变它的外观：http://jsfiddle.net/kizu/cuaC9/

这是一个基本示例，您可以进一步升级它以支持按下、聚焦、更改或任何其他状态。