问题描述
这是我的 CSS 示例:
{
_id:{category:categoryName,id:xxxxxx},amount:300
}
{
_id:{category:categoryName,amount:200
}
所以 .checkBox {
input[type='checkBox'] {
&+label{
&:after {
content: '';
border: 2px solid white
}}
&:disabled{
&+label{
&+:before{
opacity: .7;
}}
}}
}
正在改变复选标记的颜色。但在这两种情况下,当复选框被禁用和启用时。
只有在禁用时,我才需要将 ckeckmark 的颜色更改为黑色。
如果我在这里尝试更改 border: 2px solid white;
它只会在边框上更改颜色,而不是在复选标记上更改颜色。
有人知道如何更改禁用复选框中复选标记的颜色吗?
解决方法
复选框本质上很烦人。没有一种简单的方法可以更改复选框。在这里,我将提供一个易于更改的自定义复选框。
* {
margin: 0;
padding: 0;
--main-color: #1589FF;
}
.checkbox__group {
display: inline-flex;
align-content: center;
justify-content: center;
align-items: center;
user-select: none;
font-size: 20px;
margin-bottom: 10px;
}
.checkbox__group:hover {
cursor: pointer;
}
.checkbox__original {
display: none;
}
.checkbox__custom {
width: 1.5em;
height: 1.5em;
border-radius: 4px;
border: .1em solid #ccc;
text-align: center;
color: white;
transition: background .2s,border-color .2s;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
margin-right: .5em;
flex-shrink: 0;
content: '';
user-select: none;
}
.checkbox__custom::after {
content: '\2714';
transform: scale(0);
transform: rotate(0deg);
transition: transform .2s;
}
.checkbox__group:focus {
outline: none;
}
.checkbox__group:focus .checkbox__custom{
border: .1em solid var(--main-color);
outline: none;
}
.checkbox__original:checked + .checkbox__custom {
background: var(--main-color);
border: .1em solid var(--main-color);
}
.checkbox__original:checked + .checkbox__custom::after {
transform: scale(1);
transform: rotate(360deg);
}
<label for="checkbox" id="checkbox__group" class="checkbox__group">
<input type="checkbox" id="checkbox" name="checkbox" class="checkbox__original">
<div class="checkbox__custom"></div>
Hello!
</label>