I have this custom checkbox:
and I need to remove that tick, but I couldn't find a way to achieve this.
Here is the codepen for my checkbox.
.mycustom-checkbox-container {
display: flex;
.mycustom-checkbox-label {
word-wrap: break-word;
text-transform: uppercase;
color: grey;
margin: 0;
}
}
input[type='checkbox'].mycustom-checkbox {
background: none;
display: inline-flex;
width: auto;
height: auto;
text-transform: uppercase;
font-size: 16px;
vertical-align: baseline;
mask-image: none;
&::before {
content: 'No';
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
border: 1px solid;
}
&::after {
content: 'Yes';
border-inline-start: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
width: 2.5rem;
border: 1px solid;
}
&:not(:checked):not(:indeterminate)::before,
&:checked::after {
height: 2.5rem;
width: 2.5rem;
background: green;
border: none;
color: white;
}
&:checked {
background: none;
border-inline-end: none;
&::before {
border-inline-end: none;
}
}
}
input[type='checkbox']+label::after {
display: none;
}
input[type='checkbox']:checked+label {
display: none;
}
<div class="mycustom-checkbox-container">
<label class="mycustom-checkbox-label">
My Custom checkbox
</label>
<input type="checkbox" class="mycustom-checkbox">
</div>
The code snippet does not represent the outcome, but I needed to add it otherwise I couldn't post the question. I couldn't use SCSS so the checkbox does not appear as it appears on codepen. Please check the result there.
The tick disappears when I click on "NO" but appears on "YES". I bet it's something stupid, but I couldn't find the proper way to hide the tick.
Aucun commentaire:
Enregistrer un commentaire