如何更改复选框（输入）边框的样式？我已将border:1px solid #1e5180放在它上面，但在FireFox 3.5中，没有任何反应！
答案 0 :(得分：191)
我建议使用“outline”而不是“border”。例如：outline: 1px solid #1e5180。
答案 1 :(得分：67)
你应该使用
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
然后你摆脱默认的复选框图像/样式，并可以设置它的样式。无论如何，Firefox仍然存在边框
答案 2 :(得分：59)
如果在任何浏览器中发生某些事情，我会感到惊讶。这是浏览器往往不会让你风格那么多的优秀表单元素之一，并且人们通常会尝试使用javascript替换它们，以便他们可以设置样式/代码来查看和操作像复选框。
以下是一个示例：prettyCheckboxes。
答案 3 :(得分：17)
您可以使用框阴影伪造边框：
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
答案 4 :(得分：10)
我已经过时了，我知道..但是有一点解决方法是将您的复选框放在标签标签内，然后用边框设置标签样式：
<label class='hasborder'><input type='checkbox' /></label>
然后设置标签样式：
.hasborder { border:1px solid #F00; }
答案 5 :(得分：10)
以下是基于Martin的自定义复选框和带CSS3 LINK的单选按钮的纯CSS（无图像）跨浏览器解决方案：http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/
这是一个jsFiddle：http://jsfiddle.net/DJRavine/od26wL6n/
我在以下浏览器上对此进行了测试：
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
display: inline-block;
vertical-align: middle;
}
label *,
label *
{
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"]
{
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span
{
font: normal 11px/14px Arial, Sans-serif;
color: #333;
}
label:hover span::before,
label:hover span::before
{
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
label:hover span,
label:hover span
{
color: #000;
}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
content: "";
width: 12px;
height: 12px;
margin: 0 4px 0 0;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
color: #666;
}
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
cursor: default;
-moz-opacity: .4;
-webkit-opacity: .4;
opacity: .4;
}
input[type="checkbox"] + span::before
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input[type="radio"]:checked + span::before
{
content: "\2022";
font-size: 30px;
margin-top: -1px;
}
input[type="checkbox"]:checked + span::before
{
content: "\2714";
font-size: 12px;
}
input[class="blue"] + span::before
{
border: solid 1px blue;
background: #B2DBFF;
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
background: -o-radial-gradient(#B2DBFF, #dfdfdf);
background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
color: darkblue;
}
input[class="red"] + span::before
{
border: solid 1px red;
background: #FF9593;
background: -moz-radial-gradient(#FF9593, #dfdfdf);
background: -webkit-radial-gradient(#FF9593, #dfdfdf);
background: -ms-radial-gradient(#FF9593, #dfdfdf);
background: -o-radial-gradient(#FF9593, #dfdfdf);
background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
color: darkred;
} <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
答案 6 :(得分：9)
对于 Firefox ， Chrome 和 Safari ，没有任何反应。
对于 IE ，边框应用于复选框之外（不作为复选框的一部分），复选框中的“花式”着色效果消失（显示为旧式复选框）。
对于 Opera ，边框样式实际上是在复选框元素上应用边框
Opera 还会比其他浏览器更好地处理复选框上的其他样式：颜色作为刻度线的颜色应用，背景颜色应用为复选框内的背景颜色（IE应用背景，好像复选框位于带背景的<div>内）。
最简单的解决方案是将复选框包含在<div>内，就像其他人建议的那样
如果你想完全控制外观，你必须采用先进的图像/ javascript方法，也是其他人的意思。
答案 7 :(得分：7)
如果你想彻底改变视觉外观，那么使用纯css的样式复选框（以及该母版的许多其他输入元素）是不可能的。
你最好的办法是实现像jqTransform这样的东西，它实际上取代了你对图像的输入，并对它应用javascript行为来模仿一个复选框（或其他元素）
答案 8 :(得分：6)
这是我的版本，它使用FontAwesome作为复选框，我认为几乎每个人都使用FontAwesome，因此可以安全地假设您也拥有它。未经IE / Edge的测试，我认为没有人在乎。
input[type=checkbox] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
}
input[type=checkbox]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: #fef2e0;
display: block;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 7px;
}
input[type=checkbox]:checked:before {
color: black !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="checkbox">
答案 9 :(得分：4)
不，你仍然无法设置复选框本身的样式，但我（最终）想出了如何在保持单击复选框的功能时设置幻觉。这意味着即使光标没有完全静止也可以切换它，而不会有选择文本或触发拖放的风险！
示例是使用span＆＃34;按钮＆＃34;以及标签中的一些文字，但它让您了解如何使复选框不可见并在其后面绘制任何内容。
此解决方案可能也适用于单选按钮。
以下适用于IE9，FF30.0和Chrome 40.0.2214.91，仅作为基本示例。您仍然可以将它与背景图像和伪元素结合使用。
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>
答案 10 :(得分：2)
这是一种简单的方法（在伪元素/类之前或之后使用）：
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}
答案 11 :(得分：-1)
<!DOCTYPE html>
<html>
<head>
<style>
.abc123
{
-webkit-appearance:none;
width: 14px;
height: 14px;
display: inline-block;
background: #FFFFFF;
border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
content: "";
display: inline-block;
position: relative;
top: -3px;
left: 4px;
width: 3px;
height: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
}
input[type=checkbox]:checked {
background: #327DFF;
outline: none;
border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
outline: none;
}
input:hover {
border: 1px solid rgba(50,125,255,1);
}
</style>
</head>
<body>
<input class="abc123" type="checkbox"></input>
</body>
</html>
答案 12 :(得分：-5)
将它放在div中并为div添加边框
答案 13 :(得分：-7)
<div style="border-style: solid;width:13px">
<input type="checkbox" name="mycheck" style="margin:0;padding:0;">
</input>
</div>