我在我的页面上使用复选框.它工作得很好.然而,我想要一个浅蓝色的复选框和另一个浅黄色的复选框.目前,这两个复选框都是浅蓝色.我怎样才能再做一件淡黄色的呢?
这就是我的东西.
input[type=checkbox] {
position: relative;
cursor: pointer;
margin-right: 10px;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
border: 1px solid #99AFC1;
border-radius: 3px;
background-color: lightblue;
padding: 1px;
}
input[type=checkbox]:checked::before {
background-color: lightblue;
}
input[type=checkbox]:checked::after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 2px;
left: 6px;
}
<p><label><input type="checkbox" class="filter" value="Test1">Test1</label> <label><input type="checkbox" class="filter" value="Test2">Test2</label></p>