vendredi 17 juillet 2020

HTML input checkbox can't remove tick

I have this custom checkbox:

enter image description here

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