Почему не кликается чекбокс?

Question

[Сергей]

не пойму в чем проблема. Чекбокс чекается по лэйблу, но не чекается по самому себе. В чем проблема закралась?

https://codepen.io/anon/pen/KYqRYp

.checkbox-wrapper
  input(type='checkbox' id='checkbox100' name='checkbox').checkbox__input
  span.checkbox--custom
  label(for='checkbox100').checkbox text

.checkbox-wrapper {
  display: flex;
}

.checkbox {
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: 1px;
  color: white;
  position: relative;
  top: -5px;
  color: black;

  &__input {
    display: none;

    &:checked + .checkbox--custom:before,
    &.active + .checkbox--custom:before {
      content: '';
      display: block;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23E95E5E' fill-rule='evenodd' d='M7.879 13.657l8.131-8.132a.5.5 0 1 1 .708.707l-8.486 8.486a.5.5 0 0 1-.707 0l-4.243-4.243a.5.5 0 0 1 .708-.707l3.889 3.889z'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      min-width: 20px;
      height: 20px;
      top: 0;
      right: 0;
      bottom: 0;
      left: -1px;
      margin: auto;
      z-index: 10000;
    }

    &:checked + .checkbox--custom,
    &.active + .checkbox--custom {
      border: 1px solid white;

      &:hover {
        border: 1px solid red;
      }
    }
  }

  &--custom {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    min-width: 20px;
    height: 20px;
    border: 1px solid black;
    position: relative;
    transition: all 0.3s;
    margin-right: 20px;

    &:hover {
      border: 1px solid red;
    }
  }
}

Answer 1

[Ankhena]

Во-первых, квадратик это не чекбокс.
Во-вторых, потому что checkbox--custom не имеет никакой обратной связи с чекбоксом.

Решение: квадратик сделать псевдоэлементом для label, а спан убрать вовсе.

Answer 2

[NaN]

Ankhena, не обязательно делать псевдоэлементом, тем более что при данной верстке (для инпута задан display:none) это не поможет

Сергей, почитай про родственные селекторы и про атрибуты для инпута, а именно checked

Comments

[Ankhena]

Вообще-то поможет.
При display none не будет табаться с клавиатуры и читаться читалками.
Но клик по псевдо от лейбла булет работать точно также как и сам лейбл.

[NaN]

Ankhena, Если делать - то сразу нормально, с табами и прочими плюшками. Должно быть сделано удобно для любых пользователей. Да и очевиднее

[Ankhena]

NaN, поменять на паттерн visually-hidden и все будет ок.

В любом случае, про "не поможет" лучше убрать, чтобы никого не дезинформировать.

[NaN]

Ankhena, останусь при своем: ваше решение - это плохое решение.
Одно дело display:none, другое visibility: hidden. Это все таки разные вещи.

[Ankhena]

NaN,
Ладно, по пунктам, последовательно:

1. ваш совет построен ровно на том же принципе, на соседних селекторах. Для стилизации инпутов именно соседних, а не родственных. Если нужно, объясню почему.
2.

Одно дело display:none, другое visibility: hidden

Да, это разные вещи. И visibility: hidden в этой истории вообще не при делах, поскольку опять не помогут доступности.
Я же говорила про CSS паттерн visually-hidden.
Видео из выбранного ответа не смотрела, но надеюсь ТС будет использовать именно его, а не display:none и не visibility: hidden.