CSS - 利用伪元素修改checkbox样式

<div class="label_rem">
	<input type="checkbox" name="moren" id="checkbox_aa" class="remember" />
	<label for="checkbox_aa"></label><span>自定义按钮</span>
</div>
.label_rem .remember {
   display: none;
   /*隐藏复选框*/
}

.label_rem .remember:checked+label {
   background-color: #ecf2f7;
   border: 1px solid #92a1ac;
   color: #000;
   cursor: pointer;
}

.label_rem .remember+label {
   /*添加复选框样式*/
   background-color: #FFF;
   border: 1px solid #C1CACA;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
   padding: 9px;
   display: inline-block;
   position: relative;
   margin: 0;
   cursor: pointer;
}

.label_rem .remember:checked+label:after {
   /*打勾的图标  可添加图标*/
   content: '\2714';
   position: absolute;
   top: -8px;
   left: 0px;
   color: #000;
   width: 100%;
   text-align: center;
   font-size: 1.4em;
   padding: 1px 0 0 0;
   vertical-align: text-top;
}

自定义按钮效果图

猜你喜欢

转载自blog.csdn.net/FantasyWeirdo/article/details/85931645