如何设置HTML复选框，单选按钮和下拉菜单的样式？或者我可以吗？
我想将图像用于复选框或单选按钮，对于列表也是如此 - 下拉箭头在大多数情况下看起来不太好。
答案 0 :(得分：14)
请参阅这两个用于样式复选框的jQuery插件的链接＆amp;收音机按钮：
http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
答案 1 :(得分：9)
简短的回答：你不能很好地和持续地做到这一点。
您可能希望听到的答案，具体取决于您的情况：使用jQuery或类似的东西，这将为您提供大量plugins可供选择。
答案 2 :(得分：6)
你当然可以，
仅使用css（无js） Checkboxes和Radio按钮 易于自定义。
实现（上面已经由KunalB提到）涉及隐藏输入并使用标签（使用自定义图像的before伪元素）来触发输入
Dropdowns 更难并且到目前为止还没有100％的纯css +跨浏览器解决方案...... { {3}}下拉列表）
<div>
<input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
<label for="RememberMe">Remember me</label>
</div>
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] ~ label {
display:inline;
font-size: 18px;
}
input[type="checkbox"] ~ label:before {
content: '';
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/unchecked.png) no-repeat;
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin-right: 3px; /*rtl*/
}
input[type="checkbox"]:checked ~ label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/checked.png) no-repeat;
}
<ul>
<li>
<input type="radio" id="radio1" name="radios" checked />
<label for="radio1">Apples</label>
</li>
<li>
<input type="radio" id="radio2" name="radios" />
<label for="radio2">Pineapples </label>
</li>
</ul>
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
/* Select arrow styling */
.notIE label:after {
content: '';
width: 23px;
height: 23px;
position: absolute;
display: inline-block;
top: 4px;
right: 4px;
background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) {
.notIE label:after
{
display:none;
}
}
答案 3 :(得分：2)
我相信CSS 3会允许你设置这些元素的样式，但是现在它不是直接可能的。
请参阅此问题：CSS checkbox input styling
答案 4 :(得分：2)
您可以设置表单元素的样式，但很难（不可能？）使用纯CSS方法在浏览器和操作系统之间获得一致的样式。还需要对样式进行一些脚本操作。
这是一篇非常好的文章，讨论了选项和问题：Styling form controls
Listamatic有很多CSS列表样式。
答案 5 :(得分：1)
This guy几乎可以将所有样式放在表单控件上，但它在浏览器中并不一致。你将不得不去定制。使用自定义图像作为复选框，然后更改其源以获取单击的版本（反之亦然）。选择菜单可能有点棘手。我希望有一个可以帮助你的jQuery插件！
答案 6 :(得分：1)
您不能将图像作为复选框，但您始终可以构建自己的复选框：D。
放置隐藏字段和图像，在图像上添加“onclick”事件。触发onclick时，检查隐藏字段的状态，根据状态更改图像，并在隐藏字段中保存复选框的状态。
您应该检查自定义JavaScript库。我最喜欢的一个是http://www.dojotoolkit.org/
答案 7 :(得分：0)
很可能你将无法做到，这非常困难。就个人而言，我会远离那个。
答案 8 :(得分：0)
您可能会发现我的帖子很有用：http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/。
基本思想是隐藏表单元素（复选框/单选按钮）并使用CSS设置标签样式。感谢：checked选择器，可以通过为标签和输入分配样式来区分两种标签状态：checked + label，假设标签位于html代码中的复选框/单选按钮之后。在代码中使用for属性可以使完整标签可单击，修改关联元素的状态。
答案 9 :(得分：0)
最近，我遇到了来自Bootstrap WTF, forms?的创建者的惊人的 Mark otto 。
有很棒的风格答案 10 :(得分：0)
您不需要任何库。你可以用纯CSS自己做，只需要一行javascript / jquery。
您不需要任何库。 你可以放置逻辑，你可以自己动手。 一行javascript / jquery，以及所有CSS。