自定義復選框，更改：hover和：checked。不起作用

Question

我的自定義復選框有問題。 我想在：hover上將顏色更改為綠色，並在選中時將顏色更改為黃色。

我嘗試了將近10種不同的方法：/有人可以幫助我嗎？ 編碼筆

    <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 px）。

根據復選框狀態更改顏色

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

重新排列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>

將CSS選擇器添加到您的復選框，在:checked時定位到“下一個兄弟標簽”。

 &__checkbox { // abbreviated... &-input { // abbreviated... &:checked + .form__checkbox-label:before { background-color: green; } } }

Answer 2

我回到了這段代碼，現在我對更改選中按鈕有疑問。 我想添加灰色背景並顯示“ checked bird”。

我嘗試了各種方法，但沒有用。

再次鏈接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 個解決方案

解決方案1
1 已采納 2018-09-26 10:17:46

關於懸停狀態，您可以更改以下內容：

根據復選框狀態更改顏色

解決方案2
0 2018-10-16 14:08:18

自定義復選框，更改：hover和：checked。 不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2018-09-26 10:17:46

關於懸停狀態，您可以更改以下內容：

根據復選框狀態更改顏色

解決方案2 0 2018-10-16 14:08:18

自定義復選框，更改：hover和：checked。不起作用

解決方案1
1 已采納 2018-09-26 10:17:46

解決方案2
0 2018-10-16 14:08:18