How to overlap the input with div? - html

Question

I am trying to make custom radio button and I want to overlap the <input type="radio" into 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>
The main goal is to select by text div instead of radio button.
Current Layout:
Expected Layout:
How can I select the div instead of radio button with overlapping?

Answer 1

You should use a label with for and hide the radio button
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>
If you have issues giving them ids, you can wrap the whole thing in a label and use another element for the text like a 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

Wrap the text in label elements:
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>
Then change your divs to spans since the divs can't exist in labels.

Answer 3

Wrap input inside 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>