css勾选框-CSS设置checkbox复选框

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

之前发过一篇文章《jquery模拟复选框（checkbox）》

随着现代浏览器的流行，用纯CSS设置复选框也变得非常实用，下面将提到5种不同的checkbox复选框（Demo在文章底部）。

首先，需要添加一段CSS来隐藏所有Checkbox复选框，下面我们将更改其外观。 为此，您需要向 CSS 文件添加一段代码。

/**
 * 隐藏默认的checkbox
 */
input[type=checkbox] {
	visibility: hidden;
}

隐藏所有 Checkbox 复选框后css勾选框，我们需要添加一个 labelHTML 元素。 我们都知道，当带有for属性的label标签被点击时，对应的Checkbox复选框就会被选中。 这意味着我们可以通过标签的点击事件来处理我们的Checkbox复选框。

checkbox 复选框样式一

该复选框的样式类似于未锁定的滑块，滑块的选中和未选中状态显示在不同的位置。 当单击滑块按钮（标签标签）时，复选框将被选中，然后滑块将连接到 ON 位置。

我们首先为复选框区域创建 HTML。

复选框一

对于这种样式的复选框，标签不足以完成任务，我们使用 DIV 元素来包含复选框，我们需要将它们用于黄色条纹和圆角。

/**
 * Create the slider bar
 */
.checkboxOne {
	width: 40px;
	height: 10px;
	background: #555;
	margin: 20px 80px;
	position: relative;
	border-radius: 3px;
}

现在，我们可以使用标签作为条带上的滑块。 我们希望按钮的效果从条带的两侧连接到另一左侧。 我们可以添加标签的过渡。

.checkboxOne label {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: -3px;
	left: -3px;
	background: #ccc;
}

现在滑块处于选中（关闭）位置，当我们选中复选框时，我们希望发生反应，以便我们可以将滑块连接到另一侧。 我们需要知道判断复选框是否被选中，如果是，则更改label元素的left属性。

.checkboxOne input[type=checkbox]:checked + label {
	left: 27px;
}

这是第一个 Checkbox 复选框所需的 CSS。

checkbox 复选框样式二

该复选框的样式类似于样式，但不同之处在于该滑块键会改变颜色。 当您单击滑块按钮时，它会移动到条带的另一侧并更改按钮的颜色。

HTML代码和样式一一模一样。

复选框二

这个DIV会被做成一个比样式还大的条带，标签还是作为滑块，使用下面的CSS来定义它。

.checkboxTwo {
	width: 120px;
	height: 40px;
	background: #333;
	margin: 20px 60px;
	border-radius: 50px;
	position: relative;
}

这个样式中间有一个红条，滑块会沿着它左右滑动，而DIV元素已经被使用了，所以我们需要用:before伪类创建一个新元素。

.checkboxTwo:before {
	content: '';
	position: absolute;
	top: 19px;
	left: 14px;
	height: 2px;
	width: 90px;
	background: #111;
}

与样式1相同，接下来我们为标签编写CSS样式并将其用作滑块。

.checkboxTwo label {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 9px;
	z-index: 1;
	left: 12px;
	background: #ddd;
}

我想实现类似样式1的选中状态，并在重选时改变标签的left和background属性。

.checkboxTwo input[type=checkbox]:checked + label {
	left: 84px;
	background: #26ca28;
}

checkbox 复选框样式三

这个复选框的样式比样式2更复杂，它像上面的反例一样左右滑动，但是当改变选中和未选中状态时，滑块会向左滑动，并在原来的位置显示相应的文本。

首先，我们编写HTML代码，与上面相同。

复选框三

之后，我们使用相同的方法将 div 设为滑块，下面的代码将创建一个红色圆角条，我们可以在其上放置滑块和文本。

.checkboxThree {
	width: 120px;
	height: 40px;
	background: #333;
	margin: 20px 60px;
	border-radius: 50px;
	position: relative;
}

取消选择滑块时，滑块位于右侧，但左侧显示“OFF”。 点击时，滑块会向右连接，两侧显示“ON”。

但是元素的数量不足以让我们实现这个功能，所以我们需要使用:before和:after这两个伪类来创建两个元素并分别放置“ON”和“OFF”。

/**
 * 创建ON
 */
.checkboxThree:before {
	content: 'On';
	position: absolute;
	top: 12px;
	left: 13px;
	height: 2px;
	color: #26ca28;
	font-size: 16px;
}
/**
 * 创建OFF
 */
.checkboxThree:after {
	content: 'Off';
	position: absolute;
	top: 12px;
	left: 84px;
	height: 2px;
	color: #ddd;
	font-size: 16px;
}

和上面一样，我们添加滑块的样式。 单击时，它将连接到另一个左侧并改变颜色。

.checkboxThree label {
	display: block;
	width: 52px;
	height: 22px;
	border-radius: 50px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 9px;
	z-index: 1;
	left: 12px;
	background: #ddd;
}
.checkboxThree input[type=checkbox]:checked + label {
	left: 60px;
	background: #26ca28;
}

checkbox 复选框样式四

在这种样式中，我们将创建两个正方形，单击时更改上面正方形的颜色以指示选定和未选定状态。

与上面相同的 HTML 代码。

复选框四

接下来，我们要使用 CSS border-radius 属性为复选框创建外部正方形，但将其设置为 100% 会创建一个正方形。

.checkboxFour {
	width: 40px;
	height: 40px;
	background: #ddd;
	margin: 20px 90px;
	border-radius: 100%;
	position: relative;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

然后我们使用 label 元素创建一个较小的正方形，该正方形根据复选框状态改变颜色。

.checkboxFour label {
	display: block;
	width: 30px;
	height: 30px;
	border-radius: 100px;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	cursor: pointer;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
	background: #333;
	-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}

当复选框被选中时，我们需要更改外圈的背景颜色以指示选中状态。

.checkboxFour input[type=checkbox]:checked + label {
	background: #26ca28;
}

checkbox 复选框样式五

这个复选框的样式有点不同，看起来只是比浏览器默认的复选框样式稍微好一些css勾选框，但不同的是我们可以根据自己的需要定义它的样式。

首先，相同的HTML代码

复选框五

在上面的计数器示例中，我们使用了div作为复选框的滑动条或者外圆，而这次我们不需要它，我们可以使用div元素来设置复选框的区域。

.checkboxFive {
	width: 25px;
	margin: 20px 100px;
	position: relative;
}

label标签用于我们要定义的复选框的Click样式和box样式。

.checkboxFive label {
	cursor: pointer;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
  	left: 0;
	background: #eee;
	border:1px solid #ddd;
}

接下来，我们要在框中创建复选框。 为此，我们可以使用 :after 伪类来创建一个新元素。 为了实现这种风格，我们可以创建一个 5pxx9px 的椭圆形并为其添加边框。 这时，我们去掉前后边框后，它看起来就像一个字母L。然后我们可以使用CSS的transform属性来旋转它，使它看起来像一个勾号。

.checkboxFive label:after {
	opacity: 0.2;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 6px;
	left: 7px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

在之前的 CSS 中，我们已经将其不透明度设置为 0.2，因此您将看到的复选框有一个半透明的勾号。 您可以在悬停时使其变暗，并在选择时将其设置为不透明。

.checkboxFive label:hover::after {
	opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
	opacity: 1;
}

演示

本文翻译自HowToStyleACheckboxWithCSS