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;
}

自定义按钮效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值