How to change disabled checkbox color
10,250
input[type="checkbox"]:disabled + label::before{
background: gray;
}
input[type="checkbox"]:disabled + label:hover::before{
background: gray;
border: 1px solid #d4d4d5;
}
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui disabled checkbox">
<input type="checkbox" disabled="disabled">
<label>Disabled</label>
</div>
<br/>
<div class="ui disabled checkbox">
<input type="checkbox">
<label>Abled</label>
</div>
Author by
Matius Nugroho Aryanto
Professional sleeper who love to develop app either in web or mobile sometimes play futsal for fun
Updated on June 23, 2022Comments
-
Matius Nugroho Aryanto almost 2 years
i want to override the semantic ui css for disabled checkbox, since i'm not good at css i don't which role i should override.
<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/> <div class="ui disabled checkbox"> <input type="checkbox" disabled="disabled"> <label>Disabled</label> </div> <div class="ui disabled checkbox"> <input type="checkbox" disabled="disabled"> <label></label> </div>
From the snippet above it seems that they are styling the label. How can i set the box of checkbox color to something like grey or any darker color?