Question

我有这个自定义复选框：

，我需要删除该勾号，但我找不到实现此目的的方法。
Here is the codepen作为我的复选框。

.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>

该代码段不代表结果，但是我需要添加它，否则无法发布问题。我无法使用SCSS，因此该复选框不会出现在Codepen上。请在那里检查结果。
当我单击“否”时，勾号消失，但出现在“是”上。我敢打赌，这有些愚蠢，但是我找不到隐藏刻度线的正确方法。

Answer 1

您可以通过在“否”部分添加白色背景来隐藏它。

    &::before {
    background: white;
    content: 'No';

不是最漂亮的解决方案，复选框仍然会在元素下方显示。

HTML输入复选框无法删除刻度线

1 个答案: