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

【问题标题】：How to change checkbox's border style in CSS?如何更改 CSS 中的复选框边框样式？
【发布时间】：2022-02-07 22:36:11
【问题描述】：

如何更改复选框（输入）边框的样式？我已经在上面加上了border:1px solid #1e5180，但是在 FireFox 3.5 中，什么都没有发生！

【问题讨论】：

标签： html css

【解决方案1】：

我建议使用“轮廓”而不是“边框”。例如：outline: 1px solid #1e5180。

【讨论】：

Outline 是一个不错的选择。
outline 非常好，它适用于所有输入框和选择框，这对于“.error”类很有用。
您可能需要在使用大纲时将!important 添加到您的css。我在 Firefox 12.0 中对此进行了测试，如果没有 !important，只要我单击复选框，轮廓就会消失。
这是一个很好的替代方案，但是大纲的问题是在IE7中它不起作用！！
@Yises 你还要担心IE7？哎呀，对不起。

【解决方案2】：

你应该使用

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

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

【讨论】：

Opera 让您无需任何额外的技巧即可为复选框设置样式 - 我会放弃 -o-appearance 样式。不过 -moz-appearance 和 -webkit-appearance 很棒。
糟糕 - 说得太早了：“-webkit-appearance: none;”似乎禁用了复选框行为。
对我来说（chrome 5）它没有，你需要额外设置 :checked state 的样式
外观从来都不是 CSS 标准的一部分。不要使用它。
哇，这太棒了，我要摆脱插件了。我可以做任何事=> |输入[类型=复选框] |输入[类型=复选框]：悬停 |输入[类型=复选框]：选中 |输入[type=checkbox]:checked:after ...

【解决方案3】：

如果 any 浏览器中发生某些事情，我会感到惊讶。这是浏览器通常不会让您设置太多样式的优秀表单元素之一，人们通常会尝试用 javascript 替换它，以便他们可以设置样式/编码一些看起来和行为像复选框的东西。

【讨论】：

Opera 很好地处理了复选框的样式。 IE 有一些环绕复选框的样式（而不是复选框本身）。
它们现在真的很丑：D
2020年依然丑陋
2021 年依然丑陋 ;(
2021 年底太丑了，2022 年没有公告！

【解决方案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);

【讨论】：

@retrovertigo 哪个版本？
版本 12.0.2 (14606.3.4) / macOS 10.14 上的最新版本
@retrovertigo 我已经测试了我的解决方案，你是对的。如果没有进一步修改（如 -webkit-appearance: none; ），我的答案不适用于 Safari。 3年后，我会使用pendingfox或Adan给出的解决方案。但我会在几周内尝试扩展我的答案。感谢您的反馈。

【解决方案5】：

这是我的版本，它使用 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">

【讨论】：

对于那些不想使用 FontAwesome 的人，您可以删除 font-family 属性并将内容值替换为实际的复选标记字符 - 复制并粘贴：✓ 然后，您可以使用 :before 元素上的 font-size 和 line-height 属性对其进行自定义。

【解决方案6】：

这是一个纯 CSS（无图像）跨浏览器解决方案，基于 Martin 的自定义复选框和带有 CSS3 的单选按钮链接：http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/

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

我已在以下浏览器上对此进行了测试：

FireFox (41.0.2) (42)
谷歌浏览器（46.0.2490.80 m）
歌剧 (33.0.1990.43)
Internet Explorer (11.0.10240.16431 [更新版本：11.0.22])
Microsoft Edge (20.10240.16384.0)
Safari 移动 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>

【讨论】：

【解决方案7】：

我知道我已经过时了。但是一个小解决方法是将您的复选框放在标签标签内，然后用边框设置标签的样式：

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

然后为标签设置样式：

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

【讨论】：

另外请记住，标签元素将在单击它时检查复选框，即使其中的复选框不可见。所以在标签上你可以做类似label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; } 然后label > input[type=checkbox] { position: absolute; left: -999px; } 这将让你自定义样式你自己的复选框，原来的复选框仍然会被选中/取消选中，但用户不会看到它。他们只会看到您的自定义复选框。
忘记添加了，那么您可以使用 :hover 和 :checked 等选择器来设置自定义复选框的其他状态。

【解决方案8】：

对于 Firefox、Chrome 和 Safari，没有任何反应。

对于IE，边框应用在复选框之外（不是作为复选框的一部分），并且复选框中的“花哨”阴影效果消失了（显示为老式复选框）。

对于 Opera，边框样式实际上是在复选框元素上应用边框。
Opera 还比其他浏览器更好地处理复选框上的其他样式：color 应用为勾号的颜色，background-color 应用为复选框内的背景颜色（IE 应用背景，就好像复选框在带有背景的 <div> 内一样))。

结论

最简单的解决方案是像其他人建议的那样将复选框包装在 <div> 中。
如果您想完全控制外观，您将不得不使用高级图像/javascript 方法，这也是其他人的意思。

【讨论】：

+1 用于研究，但将其包装在 div 中不是解决方案。它不允许您设置复选框的样式，它允许您设置围绕复选框的样式，除非您开始尝试隐藏它并在其上绘画，这将有其自身的问题。
好吧，唯一可以让您为复选框设置样式的浏览器是 Opera。将其包装在 div 中可能是一个足够好的解决方案，但这实际上取决于您想要什么。如果你尝试设置复选框的样式，IE 实际上就像你把它放在一个 div 中一样！

【解决方案9】：

如果您想彻底改变视觉外观，那么纯 css 无法真正实现样式复选框（以及该母校的许多其他输入元素）。

你最好的办法是实现类似jqTransform 这样的东西，它实际上用图像替换你的输入并将javascript行为应用于它以模仿复选框（或其他元素）

【讨论】：

【解决方案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>

【讨论】：

如何在此处添加一个勾号（复选标记）而不是用颜色填充整个框？
试试这样的：label > input[type="checkbox"]:checked + span { background-image: url("checkmark.png"); }

【解决方案11】：

这是一个简单的方法（在伪元素/类之前或之后使用）：

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 */
}

【讨论】：

我认为这是重新设置复选框和类似内容的明智方法。
不适用于 Firefox 和 IE。更重要的是，这是一个 不正确的 Chrome 实现，因为void elements 不允许有任何内容。
Leo，你误解了“内容”这个词，它只是说那些 void 元素之间不能有内容，因为没有结束标签。例如 content 有一个结束标签，所以这些标签之间可以有内容。但是 input 没有结束标签，所以原则上它不能有内容。另一方面，伪元素有一个名为“内容”的属性，可以在任何地方使用。

【解决方案12】：

<!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>

【讨论】：

First: ":after" create √;第二：“-webkit-appearance:none”让origion style不能工作，然后你就可以定义你的style了。
请写下你的答案的简短描述。

【解决方案13】：

其实你只需要做两件事

outline: 1px solid #63DDCF
border: none !important;

【讨论】：

【解决方案14】：

把它放在一个div中并给div添加边框

【讨论】：

那么你会有一个双边框。
我的复选框
工作正常使用 htmlsandbox
定义“工作正常”。例如，我从未见过 120 像素宽的复选框。

【解决方案15】：

<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>

【讨论】：

@lexu 没有这样的东西