图形选择框

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

你不能只用CSS做这个（样式选择有很多问题，尤其是它的文字颜色），但是在JS的帮助下你可以改变它的外观：http://jsfiddle.net/kizu/cuaC9/

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

Answer 2

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