我在我的页面上使用复选框。它工作正常。但是我想一个复选框用浅蓝色,另一个用浅黄色。目前这两个复选框都是浅蓝色。我如何使另一个浅黄色?
这是我所拥有的。
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>
1条答案
按热度按时间f5emj3cl1#
* 这在Chrome、Edge和Firefox中呈现相同的效果。
只要给予那些你想成为
lightyellow
的人一个class
。对于跨浏览器的方法,我使用了
<label>
和<span>
进行样式设置。我不得不改变复选标记的颜色,这样你就可以看到它,我称
class
为“difcol”,意思是“不同的颜色”,我建议你称class
为“lightyellow-lightblue”,也就是说,使类的名称为你为那个框/那些框选择的颜色。