change background when radio button clicked - html

Question

I have a radio button which i have given some style.
when i click on it then the div background color should change.
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
What i want is, when clicking on radio button then whole div background should change rather than changing only span background.
Thank you.

Answer 1

With pure css, you can't select a parent element from within a child
element
Approach #01 (Without HTML Modifications):
Without modifying current HTML structure, you can use :before or :after pseudo element to create a fake active state.
You will need to add following CSS:
.no_of_speakers_radio_button {
position: relative;
}
.no_of_speakers_radio_button input:checked + span:before {
background-color: #ebeff1;
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
position: relative;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:checked + span:before {
background-color: #ebeff1;
position: absolute;
z-index: -1;
content: '';
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
Alternate Approach (With HTML Modification):
You can modify your HTML to the code below. The trick is to place original input out of the view and place a fake input[type="radio"] button in place.
HTML:
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio1" name="choose_speaker" class="click">
<label class="four_speakers" for="radio1">
<div>
<span class="font_size_20">4</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
CSS:
.no_of_speakers_radio_button input {
position: absolute;
opacity: 0;
left: -9999px;
top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
position: relative;
border: 1px solid black;
border-radius: 100%;
height: 12px;
width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
background-color: #222;
border-radius: 100%;
position: absolute;
opacity: 0;
z-index: 10;
content: '';
bottom: 2px;
right: 2px;
left: 2px;
top: 2px;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
opacity: 1;
}
.no_of_speakers_radio_button {
margin: 0 auto;
border:thin red solid;
position: relative;
overflow: hidden;
width:100px;
}
.no_of_speakers_radio_button label {
padding: 35px 0px;
text-align: center;
flex-direction: column;
position: relative;
cursor: pointer;
display: flex;
height: 100%;
}
.no_of_speakers_radio_button div span {
text-align: center;
font-size: 15px;
margin: auto;
display: inline-block;
vertical-align: middle;
}
.no_of_speakers_radio_button input {
position: absolute;
opacity: 0;
left: -9999px;
top: -9999px;
}
.no_of_speakers_radio_button label .fake-radio {
position: relative;
border: 1px solid black;
border-radius: 100%;
height: 12px;
width: 12px;
}
.no_of_speakers_radio_button label .fake-radio:before {
background-color: #222;
border-radius: 100%;
position: absolute;
opacity: 0;
z-index: 10;
content: '';
bottom: 2px;
right: 2px;
left: 2px;
top: 2px;
}
.no_of_speakers_radio_button input:checked + label {
background-color: #ebeff1;
}
.no_of_speakers_radio_button input:checked + label .fake-radio:before {
opacity: 1;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button label:hover {
background: #ebeff1;
}
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio1" name="choose_speaker" class="click">
<label class="four_speakers" for="radio1">
<div>
<span class="font_size_20">4</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio2" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio2">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio3" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio3">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio4" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio4">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<input type="radio" id="radio5" name="choose_speaker" class="click">
<label class="eight_speakers" for="radio5">
<div>
<span class="font_size_20">8</span>
<span class="fake-radio"></span>
</div>
<span class="font_size_17">Speakers</span>
</label>
</div>

Answer 2

You can use JQuery for this:
$(document).ready(function() {
$('.no_of_speakers_radio_button input[type="radio"]').click(function() {
$(this).parent().parent().addClass("selected");
});
});
CSS:
.no_of_speakers_radio_button.selected {
background: #ebeff1;
}

Answer 3

Using css there is no click trigger. However you can use javascript for click function to toggle background color
var radio1 = document.getElementsByClassName("click")[0];
var radio2 = document.getElementsByClassName("click")[1];
radio1.addEventListener("click",function(){
radio1.parentNode.parentNode.style.backgroundColor="red";
radio2.parentNode.parentNode.style.backgroundColor="white";
})
radio2.addEventListener("click",function(){
radio2.parentNode.parentNode.style.backgroundColor="red";
radio1.parentNode.parentNode.style.backgroundColor="white";
})
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
padding: 35px 0px;
text-align: center;
flex-direction: column;
border:thin red solid;
width:100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
}
.no_of_speakers_radio_button input:checked + span {
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover{
background: #ebeff1;
}
<div class="no_of_speakers_radio_button" class="four_speakers">
<label >
<input type="radio" name="choose_speaker" class="click" >
<span class="font_size_20">4</span>
<span class="font_size_17">Speakers</span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8</span>
<span class="font_size_17">Speakers</span>
</label>
</div>

Answer 4

You cannot traverse a parent in css i.e. there is no parent-selector.
However you can modify your html structure and style it in such a way as to achieve what you want here. I have modified your code a little bit here:
.no_of_speakers_radio_button {
margin: 0 auto;
display: flex;
height: 100px;
padding: 0;
text-align: center;
flex-direction: column;
border: thin red solid;
width: 100px;
}
.no_of_speakers_radio_button label {
overflow: hidden;
height: 100%;
display: block;
}
.no_of_speakers_radio_button label span {
text-align: center;
font-size: 15px;
margin: auto;
display: block;
}
.no_of_speakers_radio_button input {
position: absolute;
margin-top: 40px;
}
.no_of_speakers_radio_button input:checked + span {
background-color: #ebeff1;
text-align: center;
}
.no_of_speakers_radio_button input:not(:checked + span) {
background: transparent;
}
.no_of_speakers_radio_button:hover {
background: #ebeff1;
}
.font_size_20 {
height: 60px;
padding-top: 40px;
}
<div class="no_of_speakers_radio_button">
<label class="four_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">4 <span>Speakers</span> </span>
</label>
</div>
<div class="no_of_speakers_radio_button">
<label class="eight_speakers">
<input type="radio" name="choose_speaker" class="click">
<span class="font_size_20">8 <span>Speakers</span></span>
</label>
</div>

Answer 5

give a radio button a class name and in that class just put change background