CSS 简单客製化表单上的 checkbox 样式

在HTML上列出一条常规的checkbox

<label class="check-box">        <input type="checkbox"/>        <span>把冰箱发霉的柠檬拿去丢</span></label>

CSS设定上 将内建的checkbox丑丑的框框给打掉~

input[type=checkbox] {    display: none;}

运用好理解的伪元素 来添加点击前以及点击后的样式

设计点击前的框框

.check-box span{    padding-left: 36px;}.check-box span::before{    content:"";    left: 0;    top:2px;    position: absolute;    outline: 1px solid #333333;    border-radius: 5px;    width: 20px;    height: 20px;}

设计点击后的勾勾图案

.check-box span::after{    display:none; //预设为不可视状态    content: "";    left: 5px;    top:2px;    position: absolute;    width: 7px;    height: 14px;    border-right: 2px solid #f39800;    border-bottom: 2px solid #f39800;    transform: rotate(40deg);}

接着来透过input[type=checkbox]:checked控制点击选项时，触发样式

input[type=checkbox]:checked+span {    text-decoration:line-through;    color:rgba(51,51,51,0.30);}input[type=checkbox]:checked+span::before{    display:none; //点击后将框框设为不可视}input[type=checkbox]:checked+span::after{    display:block; //点击后将勾勾设为可视}

效果展示如下