纯CSS复选框样式（不支持ie婊）_css input[type='checkbox']式样兼容ie-CSDN博客

本文链接：https://blog.csdn.net/cc_King/article/details/99471977

这篇为什么不支持ie呢？因为我现在服软了。。。

开始正题

首先说一下大概思路

html代码：

<!-- 偷梁换柱 -->
<div id="wrap"><!-- 只是一个包裹器，为了将按钮放在中间 -->
    <input type="checkbox" id="checkbox" /><!-- 真正的复选框，但是不做显示，作为核心，表现的事情留给下面的span大佬 -->
    <span id="myCheckbox"></span><!-- 撑门面，显示给你看的家伙 -->
</div>

然后就是实操了（真实的操zuo）

首先将 #wrap 居中

/*****************************
*	将框框放在中间好看一点
******************************/
#wrap {
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
border: 1px solid #ccc;
}

然后定位 #checkbox和#myCheckbox 两个元素

/* - 将两个元素叠在一起 - */
#checkbox, #myCheckbox{
	position: absolute;
}

#checkbox 复选框样式

/**************************************************
*	初始化 checkbox样式 ———— 隐藏元素
*	如果 display 不为 block 时，会产生边距
*	设置隐藏样式
*	提升层级，确保checkbox在 myCheckbox之上，为什么呢？
*	不然怎么点的到嘛！！！
***************************************************/
#checkbox {
	/* - 行内元素有不知名的边距，各浏览器样式都有可能不同，所以为了不给布局产生不稳定因素，将 inline-block -> block 较为安全 - */
	display: block;
	z-index: 1;
	opacity: 0;
	outline: none;
	/* 火狐和谷歌里面，给复选框设置宽高，呈现的也不一样 */
	height: 30px;
	width: 30px;
}
/* - 值得一提的时，将 #checkbox 和 #myCheckbox 的大小设置一样，为什么呢？我不告诉你 - */

#myCheckbox:after 样式

/* - 为什么要使用after，而不直接使用元素自身呢？因为我们需要改变元素的内容，比如 小勾勾 “√” - */		
/* - 这个使用content就能实现 - */
#myCheckbox:after{
	content: "";
	display: block;
	height: 30px;
	width: 30px;
	/* - ie 不支持 rgba - */
	/* background-color: rgba(255,0,0,0.5); */
	background: #FF0000;
	/** - 作为一个前端，我们至少得假装美化一下界面吧。。。。 - **/
	font-size: 30px;
	line-height: 30px;
	text-align: center;
	font-weight: 600;
	color: #fff;
}

最后就是选中时的样式了

#checkbox:checked + #myCheckbox:after{ /* + 兄弟选中器 */
	content: "√";
	background-color: pink;
}

接下来是附上全码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复选框样式 —— 完美版</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				box-sizing: border-box;
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
			}

			#checkbox,
			#myCheckbox {
				position: absolute;
			}

			#checkbox {
				display: block;
				z-index: 1;
				opacity: 0;
				outline: none;
				height: 30px;
				width: 30px;
			}

			#myCheckbox:after {
				content: "";
				display: block;
				height: 30px;
				width: 30px;
				background: #FF0000;
				font-size: 30px;
				line-height: 30px;
				text-align: center;
				font-weight: 600;
				color: #fff;
			}

			#checkbox:checked+#myCheckbox:after {
				content: "√";
				background-color: pink;
			}
		</style>
	</head>
	<body>

		<div id="wrap">
			<!-- 只是一个包裹器，为了将按钮放在中间 -->
			<input type="checkbox" id="checkbox" /><!-- 真正的复选框，但是不做显示，作为核心，表现的事情留给下面的span大佬 -->
			<span id="myCheckbox"></span><!-- 撑门面，显示给你看的家伙 -->
		</div>
	</body>

</html>

为什么不支持ie呢？因为 ie 不支持兄弟选择器 "+"&"~" 这两者有什么区别呢？我不说。

当我上can I use 查的时候，说的是IE7以上就支持了，结果。。。。。。真棒！！！

too much选择器IE都不支持。。。。。为以后的日子感到心酸。

在网上看到 “selectivizr.js” 这个东西可以解决IE6，IE8选择器兼容的问题，结果原谅我智商不够。。。。

附上官网：忘大佬解决http://www.selectivizr.com/