纯CSS自定义checkbox对号

最新推荐文章于 2025-05-28 14:03:39 发布

原创最新推荐文章于 2025-05-28 14:03:39 发布 · 1.8w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox #css3

css 专栏收录该内容

7 篇文章

订阅专栏

在微信小程序开发中，由于样式限制，需要采用特殊方法来自定义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;/*对号的颜色*/
}

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