I need to change the checkbox color when it is in disabled.
app.component.html:
<input type="checkbox" class="custom-control-input" [disabled]="item.disabled" [checked]="item.checked">
This is the code working in CSS only on hover but that should be disabled all the time.
CSS:
input[type="checkbox"]:disabled + label:hover::before {
background-color: red;
border: 1px solid #d4d4d5;
}
you can try like below.
html
<div class="checkbox">
<input type="checkbox" disabled="disabled" />
<label>Disabled</label>
</div>
<br />
<div class="checkbox">
<input type="checkbox" />
<label>Abled</label>
</div>
css
.checkbox {
position: relative;
}
input[type='checkbox'] {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
opacity: 0 !important;
outline: 0;
z-index: 3;
width: 17px;
height: 17px;
}
input[type='checkbox'] + label {
padding-left: 1.85714em;
}
input[type='checkbox']:disabled + label::before {
background: #7e7eda;
}
input[type='checkbox']:disabled + label:hover::before {
background: gray;
border: 1px solid #d4d4d5;
}
input[type='checkbox'] + label:before {
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
content: '';
background: #fff;
border-radius: 0.21428571rem;
-webkit-transition: border 0.1s ease, opacity 0.1s ease;
transition: border 0.1s ease, opacity 0.1s ease;
border: 1px solid #d4d4d5;
}
input[type='checkbox']:checked ~ label:before {
background: #fff;
border-color: rgba(34, 36, 38, 0.35);
}
input[type='checkbox']:checked ~ label:after {
content: '✔';
position: absolute;
font-size: 14px;
top: 0;
left: 0;
width: 17px;
height: 17px;
text-align: center;
opacity: 1;
color: rgba(0, 0, 0, 0.87);
}
You can check Working Demo
Let me know if you face any issue.
