Не могу нажать на стилизованный радио

Question

Для практики мне нужно стилизовать радиокнопки. Но проблема в том, что используя стандартный метод стилизации(то есть добавления спана после инпута), кнопки переключения больше не работают. И вроде бы логично(смотря на мой код), ведь я поставил display: none;, но опять же, весь интернет говорит, что так и надо делать. Помогите пожалуйста. Вот код:

.selection-modal__block {
  border: 2px solid #c9c9c9;
  border-radius: 10px;
  padding: 30px 30px;
  margin-bottom: 30px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr 1fr auto;
  grid-template-columns: auto 1fr 1fr auto;
  -ms-grid-rows: (auto)[3];
  grid-template-rows: repeat(3, auto);
  gap: 20px;
}

.selection-modal__block .selection-modal__block-input {
  padding-top: 1px;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}

.selection-modal__block .selection-modal__block-input input {
  display: none;
}

.selection-modal__block .selection-modal__block-input span {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Размеры */
  background: #F5F5F5;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.selection-modal__block .selection-modal__block-input input:checked+span {
  background: #000;
}

.selection-modal__block .selection-modal__block-input input:checked+span::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  background: #fff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

<form action="#">
  <div class="selection-modal__block">
    <label for="no reward" class="selection-modal__block-input">
              <input type="radio" name="no reward" id="no-reward" checked><span></span>
            </label>
    <div class="selection-modal__block-title">
      <h3>
        Pledge with no reward
      </h3>
    </div>
    <div class="selection-modal__block-subtitle">
      <p>
        Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.
      </p>
    </div>
  </div>
  <div class="selection-modal__block">
    <div class="selection-modal__block-input">
      <label for="no reward">
              <input type="radio" name="no reward" id="no-reward"><span></span>
            </label>
    </div>
    <div class="selection-modal__block-title">
      <h3>
        Pledge with no reward
      </h3>
    </div>
    <div class="selection-modal__block-subtitle">
      <p>
        Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.
      </p>
    </div>
  </div>
</form>

ПРИМЕТКА: Верстку других элементов можете опустить. Не могу понять, что происходит именно с радио.

Answer 1

.selection-modal__block {
  border: 2px solid #c9c9c9;
  border-radius: 10px;
  padding: 30px 30px;
  margin-bottom: 30px;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr 1fr auto;
  grid-template-columns: auto 1fr 1fr auto;
  -ms-grid-rows: (auto)[3];
  grid-template-rows: repeat(3, auto);
  gap: 20px;
 align-items: center;
}

.selection-modal__block .selection-modal__block-input {
  padding-top: 1px;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / 2;
}

.selection-modal__block .selection-modal__block-input input {
  -webkit-appearance: none;
 
}

.selection-modal__block .selection-modal__block-input input {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Размеры */
  background: #F5F5F5;
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.selection-modal__block .selection-modal__block-input input:checked {
  background: #000;
}

.selection-modal__block .selection-modal__block-input input:checked::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  background: #fff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

<form action="#">
  <div class="selection-modal__block">
    <label for="no reward" class="selection-modal__block-input">
              <input type="radio" name="no reward" id="no-reward" checked>
            </label>
    <div class="selection-modal__block-title">
      <h3>
        Pledge with no reward
      </h3>
    </div>
    <div class="selection-modal__block-subtitle">
      <p>
        Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.
      </p>
    </div>
  </div>
  <div class="selection-modal__block">
    <div class="selection-modal__block-input">
      <label for="no reward">
              <input type="radio" name="no reward" id="no-reward">
            </label>
    </div>
    <div class="selection-modal__block-title">
      <h3>
        Pledge with no reward
      </h3>
    </div>
    <div class="selection-modal__block-subtitle">
      <p>
        Choose to support us without a reward if you simply believe in our project. As a backer, you will be signed up to receive product updates via email.
      </p>
    </div>
  </div>
</form>

БЛОГ НА HUSL

Не могу нажать на стилизованный радио

Ответы (1 шт):