如何在CSS中更改复选框的边框样式？

Question

如何更改复选框(输入)边框的样式？我戴上border:1px solid #1e5180它,但在FireFox 3.5中,没有任何反应!

Answer 1

我建议使用"outline"而不是"border".例如:outline: 1px solid #1e5180.

Answer 2

你应该用

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

然后你摆脱默认的复选框图像/样式,并可以设置它的样式.无论如何,Firefox中仍然存在边框

Answer 3

如果在任何浏览器中发生某些事情,我会感到惊讶.这是浏览器往往不会让你风格那么多的优秀表单元素之一,并且人们通常会尝试使用javascript替换它们,以便他们可以设置样式/代码来查看和操作像复选框一样.

这是一个例子:prettyCheckboxes.

Answer 4

您可以使用框阴影伪造边框:

-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);

Answer 5

我已经过时了,我知道..但是有一点解决方法是将您的复选框放在标签标签内,然后用边框设置标签样式:

<label class='hasborder'><input type='checkbox' /></label>

然后设置标签样式:

.hasborder { border:1px solid #F00; }

Answer 6

这是一个基于Martin的自定义复选框和带有CSS3 LINK的单选按钮的纯CSS(无图像)跨浏览器解决方案:http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-CSS3-重新/

这是一个jsFiddle:http://jsfiddle.net/DJRavine/od26wL6n/

我在以下浏览器上测试了这个:

• FireFox(41.0.2)(42)
• 谷歌浏览器(46.0.2490.80米)
• 歌剧(33.0.1990.43)
• Internet Explorer(11.0.10240.16431 [更新版本:11.0.22])
• Microsoft Edge(20.10240.16384.0)
• Safari Mobile iPhone iOS9(601.1.46)

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>

Answer 7

对于Firefox,Chrome和Safari,没有任何反应.

对于IE,边框应用于复选框之外(不作为复选框的一部分),复选框中的"奇特"着色效果消失(显示为旧式复选框).

对于Opera,边框样式实际上是在复选框元素上应用边框.
Opera还比其他浏览器更好地处理复选框上的其他样式:颜色应用于刻度线的颜色,背景颜色应用于复选框内的背景颜色(IE应用背景,就好像复选框位于<div>带背景的内部)) .

结论

最简单的解决方案是将复选框包装在<div>其他人建议的内容中.
如果你想完全控制外观,你必须采用先进的图像/ javascript方法,也是其他人的意思.

Answer 8

这是我使用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">

Answer 9

如果您想要彻底改变视觉外观,那么使用纯CSS将无法实现样式复选框(以及该母版的许多其他输入元素).

你最好的办法是实现类似jqTransform的东西,它实际上用图像替换你的输入并对它应用javascript行为来模仿一个复选框(或其他元素)

Answer 10

不，您仍然不能为复选框本身设置样式，但是我（最后）想出了如何为幻觉设置样式，同时保留单击复选框的功能。这意味着即使光标不是完全静止也可以切换它，而不必冒险选择文本或触发拖放操作！

该示例使用了跨度“按钮”以及标签中的一些文本，但是它使您了解如何使复选框不可见并在其后面绘制任何内容。

此解决方案也可能适合单选按钮。

以下内容可在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>&nbsp;</span>Label text
</label>