纯CSS自定义checkbox对号

在微信小程序开发中,由于样式限制,需要采用特殊方法来自定义checkbox。本文介绍了一种利用CSS3伪类实现的方法,包括自定义边框和内部对号的样式,通过展示源码和效果来说明实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


  最近在做微信小程序,因为这个东西用的是自己的样式,也不支持BOM,所以有些东西用以前做浏览器前端的经验来看不太好弄,必须另辟捷径。
  今天在做一个小程序项目,需要自定义checkbox复选框,自定义边框和内部对号样式,结合在网上搜到的东西以及自己理解,总算是做出来了。
 这里主要是利用css3的伪类。
  废话不多话,以下是源码实现。

 html结构大概是这样的:

<label id="labelId" for="regular">
    <checkbox id="regular"/>
</label>

 css代码是这样的:

#labelId{
    width:30px;
    height:30px;
    border-radius:4px;
    background-color: rgb(0,150,136);
    position: relative;
}
#labelId:after {
    content: '\00a0';
    display: inline-block;
    border: 4px solid #fff;
    border-top-width: 0;
    border-right-width: 0; 
    width: 18px;
    height: 10px;
    -webkit-transform: rotate(-50deg);
    position: absolute;
    top:6px;
    left:4px;
}

效果如下:

选中前和选中后:

这里写图片描述这里写图片描述


第二种

HTML:
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>

CSS:
input[type='checkbox']+label::before {
  content:'\a0';/*不换行空格*/
  display: inline-block;
  vertical-align: 0.2em;
  width:0.8em;
  height:0.8em;
  margin-right: .2em;
  border-radius:.2em;
  background: silver;/*复选框的背景色*/
  text-indent:0.15em;
  line-height: 0.65;
}
input[type='checkbox'] {
  /*隐藏掉原先实际的 checkbox 框,之所以没用 display:none; 这种简单直接的方式,是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
  position: absolute;
  clip:rect(0,0,0,0);
}
input[type='checkbox']:checked+label::before {
  content:'\2713'; /*对号的 Unicode字符*/
  background: yellowgreen;/*对号的颜色*/
}

效果如下:
这里写图片描述这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值