Как перекрыть вход с div?

Question

Я пытаюсь сделать пользовательский переключатель и хочу перекрыть <input type="radio" в div.

input[type="radio"]:checked+div {
  color: #fff;
  background-color: rgb(13, 50, 218);
}

<input type="radio" name="favorite_pet" value="Parrot">
<div>Parrot</div><br>
<input type="radio" name="favorite_pet" value="Dog">
<div>Dog</div><br>

Основная цель состоит в том, чтобы выбрать вместо текстовой кнопки текст div.

Текущее расположение:

Ожидаемое расположение:

Как выбрать переключатель вместо переключателя с перекрытием?

Answer 1

Вы должны использовать метку для и скрыть переключатель

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  color: #fff;
  background-color: rgb(13, 50, 218);
}

<input type="radio" name="favorite_pet" value="Parrot" id="rb1">
<label for="rb1">Parrot</label><br>
<input type="radio" name="favorite_pet" value="Dog" id="rb2">
<label for="rb2">Dog</label><br>

Если у вас есть проблемы с присвоением им идентификаторов, вы можете обернуть все это в метку и использовать другой элемент для текста, например, span.

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + span {
  color: #fff;
  background-color: rgb(13, 50, 218);
}

<label>
  <input type="radio" name="favorite_pet" value="Parrot">
  <span>Parrot</span>
</label><br>
<label>
  <input type="radio" name="favorite_pet" value="Dog">
  <span>Dog</span>
</label><br>

Answer 2

Обернуть текст в элементы метки:

input[type="radio"]:checked+span {
  color: #fff;
  background-color: rgb(13, 50, 218);
}

input {
  display: none;
}

span {
  display: block;
}

<label><input type="radio" name="favorite_pet" value="Parrot">
<span>Parrot</span></label><br>
<label><input type="radio" name="favorite_pet" value="Dog">
<span>Dog</span></label><br>

Затем измените ваши div-ы на span, так как div-метки не могут существовать в метках.

Answer 3

Обертка input внутри label.

label, span{
  font-family: sans-serif;
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
}
input[type="radio"] {
  position: absolute;
  visibility: hidden;
}

input[type="radio"]:checked + span{
  background: blue;
  color: #fff;
}
input[type="radio"] + span:before {
  content: '\2610'; 
  margin-right: 10px;
  font-size: 20px;
}
input[type="radio"]:checked + span:before {
  content: '\2611';  
}

<label>
  <input type="radio" name="group">
  <span>Parrot</span>
</label>
<label>
  <input type="radio" name="group">
  <span>Dog</span>
</label>