html - 如何将输入与 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而不是单选按钮进行选择。

当前布局：

预期布局：

如何选择 div 而不是重叠的单选按钮？

Answer 1

您应该使用带有 for 的标签并隐藏单选按钮

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>

如果您在给他们 id 时遇到问题，您可以将整个内容包装在一个标签中，并为文本使用另一个元素，例如跨度。

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>