css使用伪元素改变checkbox勾选的样式

最新推荐文章于 2024-05-23 15:23:28 发布

想要飞翔的小猪

最新推荐文章于 2024-05-23 15:23:28 发布

阅读量3.5k

点赞数 3

分类专栏： css 文章标签： css input checkbox

本文链接：https://blog.csdn.net/dwb123456123456/article/details/80818914

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

什么是伪元素：伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。

怎样表示伪元素?最好使用双冒号，防止与伪类混淆。

content是伪元素必需的属性，其内容可以分为几类：字符串/attr/url/counter(计算器)。若伪元素没有内容，需赋值为空格：

直接看源代码，里面包含注释，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.sub_item {
display: flex;
align-items: center;
justify-content: center;
}

label {
position: relative;
margin-top: 5px;
}

label input {
visibility: hidden;
}
input:checked+.show-box {/*+:表示元素的下一个元素*/
background: #00F5FF;
border: 1px solid #00F5FF;
}

.show-box {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 1px;
border: 1px solid #d8d8d8;
background: white;
}

.show-box:before {
/*// 使用了 absolute 所以无所谓是 before 还是 after*/
content: '';
/*// 空白内容占位，当做盒模型处理，见下面*/
position: absolute;
top: 2px;
left: 7px;
width: 5px;
height: 12px;
/*// 勾的短边*/
/*// 勾的长边*/
border: 2px solid white;
/*// 勾的颜色*/
border-width: 0 1.06px 2px 0;
/* // 勾的宽度*/
transform: rotate(45deg);
/*// 定制宽高加上旋转可以伪装内部的白色勾*/
}

.red_price {
margin-left: 20px;
}
</style>
</head>
<body>
<div class="checkbox">
<div class="sub_item">
<label>
  <input type="checkbox" /> 
  <div class="show-box" ></div>
  </label>
<div class="red_price">是否开启积分抵扣</div>
</div>
 <div class="sub_item">
   <label>
    <input type="checkbox" />
      <div class="show-box"></div>
    </label>
  <div class="red_price">是否开启余额抵扣</div>
</div>
</div>
</body>
</html>

想要飞翔的小猪

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css使用伪元素改变checkbox勾选的样式

什么是伪元素：伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。怎样表示伪元素?最好使用双冒号，防止与伪类混淆。content是伪元素必需的属性，其内容可以分为几类：字符串/attr/url/counter(计算器)。若伪元素没有内容，需赋值为空格：直接看源代码，里面包含注释， &lt;!DOCTYP...
复制链接

扫一扫