Пользовательский флажок, изменить: hover и: проверено.Не работает - PullRequest
Новая
       3

Пользовательский флажок, изменить: hover и: проверено.Не работает

0 голосов
/ 26 сентября 2018

У меня проблема с моим пользовательским флажком.Я хотел бы изменить цвет на зеленый: наведен и желтый на проверено.

Я попробовал почти 10 разных способов: / Кто-то может мне помочь? Код 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;
    }
  }

Ответы [ 2 ]

0 голосов
/ 16 октября 2018

Я вернулся к этому коду, и теперь у меня возникла проблема с кнопкой проверки изменений.Я хотел бы добавить серый фон и показать «проверил птицу».

Я пробовал различные методы, и это не работает ..

Снова ссылка 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;
  }
}
0 голосов
/ 26 сентября 2018

Селектор &:hover + &::before не будет работать, поскольку вы выбираете псевдоэлемент следующего элемента (+ &::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 пикселей) при наведении.

Изменение цвета в зависимости от состояния флажка

Чтобы сделать это, вам нужно сделать несколько вещей:

  1. Изменить порядок 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>

  2. Добавить селектор CSS дляваш флажок, ориентируясь на «метку следующего брата», когда :checked. 

    &__checkbox {
  // abbreviated...

  &-input {
    // abbreviated...

    &:checked + .form__checkbox-label:before {
      background-color: green;
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...