Question

我的自定义复选框有问题。我想在：hover上将颜色更改为绿色，并在选中时将颜色更改为黄色。

我尝试了近10种不同的方法：/有人可以帮助我吗？ Code Pen

    <body>
      <div class="container">


            <div class="form__checkbox">
              <label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
              <input type="checkbox" id="accept" class="form__checkbox-input">
            </div>

</body>

CSS（SASS）：

  &__checkbox {
    z-index: 2;
    position: relative;
    &-label {
      cursor: pointer;
      @include inputFonts();
      margin-left: 46px;
      padding: 0.5rem;
      font-size: 1.6rem;

      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 2%;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        background-color: blue;
        margin-right: 20px;
      }
      &:hover + &::before {
        background-color: red;
        height: 40px;
      }
    }
    &-input {
      position: absolute;
      top: -999999px;
      opacity: 0;
    }
  }

Answer 1

选择器&:hover + &::before将不起作用，因为您正在选择下一个元素的psudo-element（+ &::before）。（我认为）您想要做的是更改当前元素的伪元素。

关于悬停状态，您可以更改：

  &:hover + &::before { // compiled to: .form__checkbox-label:hover + .form__checkbox-label::before
    background-color: red;
    height: 40px;
  }

对此：

  &:hover:before { // compiled to: .form__checkbox-label:hover:before
    background-color: red;
    height: 40px;
  }

这会使示例中的蓝色复选框在悬停时变为红色（高度为40像素）。

根据复选框状态更改颜色

为此，您需要做一些事情：

重新排列html

<div class="form__checkbox">
  <!-- input first! -->
  <input type="checkbox" id="accept" class="form__checkbox-input">
  <label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
</div>

在:checked时将css选择器添加到复选框，定位“下一个同级标签”。

&__checkbox {
  // abbreviated...

  &-input {
    // abbreviated...

    &:checked + .form__checkbox-label:before {
      background-color: green;
    }
  }
}

Answer 2

我回到了这段代码，现在我对更改检查按钮有疑问。我想添加灰色背景并显示“格仔”。

我尝试了各种方法，但无效。

重新链接https://codepen.io/direct96/pen/eLXMXY

&__checkbox {
z-index: 2;
position: relative;
&-label {
  cursor: pointer;
  @include inputFonts();
  margin-left: 46px;
  padding: 0.5rem;
  font-size: 1.6rem;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 15px;
    margin-right: 50px;
    top: 50%;
    transform: translateY(-50%);
    height: 23px;
    width: 23px;
    background-color: $form-text-color;
  }
  &::after {
    content: "";
    position: absolute;
    display: none;
    left: 4.5%;
    top: 45%;
    background: white;
    width: 2.5px;
    height: 2.5px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
      4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
  }

  &:hover::before {
    background-color: $color-input-focus;
  }
}

自定义复选框，更改：hover和：checked。不起作用

2 个答案:

关于悬停状态，您可以更改：

根据复选框状态更改颜色