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

122

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

html  css 
— 瑞奇
source

Answers:

63

如果任何浏览器发生问题，我都会感到惊讶。这是那些出色的表单元素之一，浏览器往往不会让您设置太多样式，并且人们通常尝试使用javascript替换它们，以便他们可以对样式进行设置/编码以使其外观和行为类似复选框。

— 苏菲亚
source
4
Opera在复选框上可以很好地处理样式。IE的某些样式环绕复选框（而不是复选框本身）。
— 敬畏
4
今天他们实际上是丑陋的：D
— GergelyFehérvári17年
1
2020
— Paul
210

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

— 格雷格
source
3
大纲是一个不错的选择。
— Nippysaurus 2011年
4
轮廓非常好，它适用于所有输入和选择框，这对于“ .error”类很有用。
— SztupY 2011年
2
!important使用大纲时，您可能需要添加到CSS。我在Firefox 12.0中进行了测试，没有！important，只要单击复选框，轮廓就会消失。
— Weezle'5
3
这是一个很好的选择，但是大纲的问题是在IE7中不起作用！
— 伊塞斯2012年
13
@Yises您是否需要担心IE7？kes，对不起。
— theblang
71

你应该用

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

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

— 瓦列里
source
2
Opera可让您设置复选框样式，而无需任何额外的技巧-我会省略-o-appearance样式。-moz-appearance和-webkit-appearance很棒。
— Neall 2010年
7
糟糕-讲得太早了：“ -webkit-appearance：没有；” 似乎禁用了复选框行为。
— Neall 2010年
6
对我来说（chrome 5）没有，您需要设置：checked extra样式
— Valerij 2010年
1
外观从来都不是CSS标准的一部分。不要使用它。
— Evgeny
哇，这太棒了，我要除掉插件。我可以做任何事情=> | 输入[类型=复选框] | 输入[类型=复选框]：悬停| 输入[类型=复选框]：已选中| input [type = checkbox]：checked：after ...
— h0mayun 2014年
21

您可以使用框阴影来伪造边框：

-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);
— 丹尼斯·海登
source
@retrovertigo哪个版本？
— 丹尼斯·海登
版本12.0.2（14606.3.4）/最新在MacOS 10.14
— retrovertigo
@retrovertigo我已经测试了我的解决方案，您是对的。未经进一步修改（例如-webkit-appearance：none;），我的答案就不适用于Safari。3年后，我将使用由Andrewfox或Adan提供的解决方案。但是，我将尝试在几周内延长答案。感谢您的反馈意见。
— 丹尼斯·海登
11

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

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

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

  • 火狐（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>
展开摘要

— 阿丹·雷特拉（Adan Rehtla）
source
10

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

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

然后设置标签样式：

.hasborder { border:1px solid #F00; }
— 胡萨姆
source
1
另外请记住，即使单击复选框，label元素也会在选中时选中它。因此，可以在标签上执行类似操作label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }，然后label > input[type=checkbox] { position: absolute; left: -999px; }单击“自定义样式” ，然后仍可以选中/取消选中原始复选框，但用户看不到它。他们只会看到您的自定义复选框。
— 加文2015年
1
忘记添加，那么您可以使用选择器，例如:hover和 :checked来设置自定义复选框的其他状态。
— 加文2015年
10

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

— 狐狸
source
9

对于Firefox，Chrome和Safari，什么也没有发生。

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

对于Opera，边框样式实际上是在复选框元素上应用边框。
Opera还比其他浏览器更好地处理了复选框上的其他样式：将颜色用作刻度线的颜色，将背景颜色用作复选框内部的背景色（IE会应用背景，就像复选框位于<div>带有背景的a内一样）） 。

结论

最简单的解决方案是将复选框包装在<div>其他建议中。
如果要完全控制外观，则必须使用高级图像/ JavaScript方法，这也被其他人所指。

— 敬畏
source
2
+1用于研究，但是将其包装在div中并不是解决方案。它不允许您对复选框进行样式设置，而可以让您围绕复选框进行样式设置，除非您开始尝试隐藏它并对其进行绘制，否则将遇到问题。
好吧，唯一可以让您设置复选框样式的浏览器是Opera。将其包装在div中是一个可能足够好的解决方案，但这实际上取决于您想要什么。如果您尝试设置复选框的样式，IE实际上就像将其放在div中一样！
— 敬畏
7

如果要彻底改变外观，纯CSS不可能真正实现样式复选框（以及该主题的许多其他输入元素）的样式。

最好的选择是实现类似于jqTransform的功能，该操作实际上将您的输入替换为图像，并对其应用javascript行为以模仿复选框（或与此相关的其他元素）

— 克里斯
source
4

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

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

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

以下内容可在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>
— LGT
source
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 */
}
— 方力士
source
我认为这是重新设置复选框和类似样式的明智方法。
— Alex Fang
1
在Firefox和IE上无法使用。更重要的是，这是Chrome 的错误实现，因为不允许void元素包含任何内容。
— 狮子座
Leo，您误解了“内容”一词，它的意思是那些无效元素之间没有内容，因为没有结束标记。例如<a> content </a>具有结束标记，因此这些标记之间可以包含内容。但是输入没有结束标记，因此原则上不能包含内容。另一方面，伪元素具有一个称为“内容”的属性，该属性可在任何地方使用。
— 即将
-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>
展开摘要

— 继续学习
source
首先：“：after”创建√；第二：“ -webkit-appearance：none”不能使原始样式起作用，然后可以定义样式。
— KeepLearn '19
2
请写一个简短的说明。
— 安吉尔·塞勒斯
-5

将其放在div中并为div添加边框

— 中帽
source
5
然后，您将有一个双边框。
— Egor Pavlikhin
<div style =“ border-style：solid; width：120px;”> <input type =“ checkbox” name =“ mycheck”>“我的复选框” <​​/ input> </ div>与html沙盒兼容
— Midhat
8
定义“工作正常”。例如，我从未见过120像素宽的复选框。
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— 中帽
source
7
@lexu没有</ input>之类的东西
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.