CSS Radio button

введите сюда описание изображения

Нужно сделать чтобы при нажатии на любую часть поля срабатывала кнопка, но я что-то не могу понять как


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

Автор решения: UModeL

Простейший способ добиться такого поведения - обернуть блок тегом <label>:

label {
  margin: .5em auto;
  display: flex;
  flex-direction: column;
  padding: .5em 1em;
  border-radius: .25em;
  font: 16px/2em sans-serif;
  box-shadow: 0 0 1px 2px #ccc;
}

div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

div:nth-of-type(2) {
  padding-left: 1.6em;
  color: #ccc;
}
<label><div><span class="type"><input type="radio" name="by"> Разовая покупка</span><span class="price">2300 ₽</div><div>Доставка: 1 раз Доставка: 250 ₽</div></label>
<label><div><span class="type"><input type="radio" name="by"> Бартер</span><span class="price">По договорённости</div><div> Доставка: ∞ раз Доставка: cамовывоз</div></label>
<label><div><span class="type"><input type="radio" name="by"> Опт</span><span class="price">1700 ₽</div><div> Доставка: ∞ раз Доставка: 150 ₽</div></label>

→ Ссылка