修改 input checkbox(複選框) 選中的背景顏色 _@jie
阿新 • • 發佈:2021-02-07
技術標籤:css
在專案中遇到 修改 input選中後的背景顏色
實現效果如下圖:
程式碼如下:
通過 after 偽類選擇器 實現
<style>
input[type=checkbox] {
cursor: pointer;
position: relative;
width: 15px;
height: 15px;
font-size: 14px;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
color: #000;
width: 15px;
height: 15px;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius : 3px
}
input[type=checkbox]:checked::after {
content: "✓";
color: #fff;
font-size: 12px;
font-weight: bold;
background-color: #ff366f;
}
</style>