【发布时间】：2010-11-10 15:31:00
【问题描述】：
如何设置 HTML 复选框、单选按钮和下拉菜单的样式？或者我可以吗？
我想为复选框或单选按钮使用图像，列表也一样 - 下拉箭头大多数时候看起来不太好。
【问题讨论】：
标签： css
【发布时间】：2010-11-10 15:31:00
【问题描述】：
查看 jQuery Plugins for Styleing Checkbox & Radio Buttons 的 2 个链接：
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
【讨论】：
-
该页面上的大部分链接都已损坏
-
您不需要任何库。您可以使用纯 CSS 自己完成，只需一行 javascript/jquery。这些不需要任何库。你可以把逻辑和你自己滚动。一行 javascript/jquery，以及所有的 CSS。指南在这里-github.com/scazzy/CSS-FORM-UI
你当然可以，
Checkboxes 和 Radio 按钮易于自定义，只需 css（无 js）。
实现（上面的 KunalB 已经提到）涉及隐藏输入并使用标签（带有自定义图像的 before 伪元素）来触发输入
Dropdowns 另一方面，要困难得多，迄今为止还没有 100% 纯 CSS + 跨浏览器的解决方案...(Here's my S.O. answer用于下拉菜单）
LIVE DEMO 适用于所有 3 个：单选按钮、复选框和下拉菜单。
自定义复选框
h2 {
font-weight: bold;
margin: 20px 0 5px;
}
li {
margin: 0.5em 0;
}
/*#region checkbox */
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]~label {
display: inline;
font-size: 18px;
}
input[type="checkbox"]~label:before {
content: '';
border-radius: 0.2em;
border: 1px solid #333;
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin-right: 0.5em;
width: 32px;
height: 32px;
display: inline-flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked~label:before {
content: '✓';
}<h2>Custom Checkbox</h2>
<div>
<input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
<label for="RememberMe">Remember me</label>
</div>自定义单选按钮
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;
border: 1px solid #222;
border-radius: 50%;
vertical-align: middle;
margin-right: 0.5em;
}
input[type="radio"]:checked+label:before {
content: '';
box-shadow: inset 0 0 0 0.6em white, inset 0 0 0 1em #333;
}
h2 {
font-weight: bold;
margin: 20px 0 5px;
}
ul {
list-style: none;
}
li {
margin: 0.5em 0;
}<h2>Custom Radio Button</h2>
<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>自定义下拉菜单
select {
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none;
/* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}<h2>Custom Dropdown</h2>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>【讨论】：
This guy 几乎具有您可以在表单控件上放置的所有样式，但在浏览器中并不一致。你将不得不去定制。为复选框使用自定义图像，然后更改其来源以获取单击版本（反之亦然）。选择菜单可能有点棘手。我希望有一个jQuery插件可以帮助你！
【讨论】：
我相信 CSS 3 将允许您设置这些元素的样式，但目前还不能直接实现。
看到这个问题：CSS checkbox input styling
【讨论】：
您可以设置表单元素的样式，但使用纯 CSS 方法很难（不可能？）在浏览器和操作系统之间获得一致的样式。还需要对样式进行一些脚本操作。
这是一篇非常好的文章，讨论了选项和问题：Styling form controls
Listamatic 拥有大量 CSS 列表样式。
【讨论】：
您不能将图像作为复选框，但您始终可以构建自己的复选框：D。
放置一个隐藏字段和一个图像，在图像上添加一个“onclick”事件。当 onclick 被触发时，检查隐藏字段的状态，根据状态更改图像并将复选框的状态保存在隐藏字段中。
您应该检查自定义 javascript 库。我的最爱之一是http://www.dojotoolkit.org/
【讨论】：
你很可能做不到，这非常困难。就个人而言，我会远离那个。
【讨论】：
您可能会发现我的帖子很有用：http://kunal-b.in/2011/07/css-for-attractive-checkboxes-and-radio-buttons/。
基本思想是隐藏表单元素（复选框/单选按钮）并使用 CSS 设置标签样式。感谢 :checked 选择器，可以通过将样式分配给 label 和 input:checked + label 来区分两种标签状态，假设标签位于 html 代码中的复选框/单选按钮之后。在代码中使用 for 属性可以使整个标签可点击，从而修改关联元素的状态。
【讨论】：
最近我从 Bootstrap Mark otto 的创建者那里遇到了惊人的 WTF, forms?。它有很棒的风格
- 复选框
- 单选按钮
- 选择
- 进度条
- 文件浏览器
【讨论】：
您不需要任何库。您可以使用纯 CSS 自己完成，只需一行 javascript/jquery。
这些不需要任何库。 你可以把逻辑和你自己滚动。 一行 javascript/jquery，以及所有的 CSS。
【讨论】：