利用css將複選框設為透明並改變勾選樣式
阿新 • • 發佈:2021-02-19
一、我們先寫好HTML的程式碼
我這裡是寫的一個登入介面
<label for="1">
<input type="checkbox" id="1" class="ma">
<span class="one"></span>
記住密碼
</label>
<label for="2">
<input type ="checkbox" id="2" class="ma">
<span class="two"></span>
自動登入
</label>
我們用span標籤用來覆蓋原有的checkbox
這是效果圖
二、css程式碼新增
我們將原有的框改為透明
.ma {
margin: 30px 0 30px 50px;
width: 20px;
height: 20px;
cursor : pointer;
opacity: 0;
}
再修改span樣式讓他變成一個你想要的寬和高
程式碼如圖
.ma[type=checkbox]+span{
display: inline-block;
border-radius: 2px;
width: 20px;
height: 20px;
border: .02rem solid #0D1529;
background-color: transparent;
position: absolute;
cursor: pointer;
}
完成之後效果大概是這樣
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210130174611742.png#pic_center)
透明的效果已經出來了
最後也是最重要的是點選之後的效果
我們可以用偽元素的方法
.ma[type=checkbox]:checked+span::after{
content:'\2714' ;
color: blue;
position: absolute;
font-size: 20px;
left: 2px;
bottom: -2px;
}
content裡面可以放任意的特殊字元並且修改大小和顏色
最後我們就成功了