CODEWITHSUNDEEP
htmlcss
user7030651
user7030651

Reputation:

change background when radio button clicked

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. Just like in the image

Thank you.

Upvotes: 0

Views: 3596

Answers (5)

akshay shetty
akshay shetty

Reputation: 304

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

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 1

nashcheez
nashcheez

Reputation: 5183

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>

Upvotes: 0

thangavel .R
thangavel .R

Reputation: 466

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>

Upvotes: 0

Taniya
Taniya

Reputation: 550

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;
 }

Upvotes: 0

Related Questions