CSS styling on Radio buttons stops working after one radio group

No replies

Mon, 2021-09-27 19:16

bosstones737

Offline

newbie

Last seen: 1 year 34 weeks ago

Timezone: GMT-4

Joined: 2021-09-27

Posts: 1

Points: 2

Hi all! Somewhat of a novice here so please forgive me if this is an easy question to answer (fingers crossed it is because I have been pulling my hair out!)

I am trying to make a css stylized questionnaire, which will likely have about 200 radio-button questions. They are each going to have 3 options for answers. I have done plenty of radio-button forms in the past, but this is different with the CSS involved.

Here is my CSS section:

<style>
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
 
	*{
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
 /* height: 5%;*/
  place-items: center;
  align-content: center;
/*  background: #555555;*/
		background-color: rgb(32, 32, 32);
        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" />, rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
  font-family: 'Lato', sans-serif;
}
 
.question{
  display: grid;
  background: #fff;
  height: 100px;
  width: 500px;
  align-items: center;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 75px;
  width: 325px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper .option{
  background: #fff;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #808080;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.5s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1{
  border-color: #00D000;
  background: #00D000;
}
   #option-2:checked:checked ~ .option-2{
  border-color: #FFC300;
  background: #FFC300;
}
   #option-3:checked:checked ~ .option-3{
  border-color: #FF2D00;
  background: #FF2D00;
}
		/*color dot hole when selected*/
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot{
  background: #fff;
}
		/*size and opacity of dot when selected*/
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before{
  opacity: 1;
  transform: scale(1);
}
		/*color of text of answer when not selected*/
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
	/*color of text of answer when selected*/
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span{
  color: #fff;
}
 
</style>

and when I start to make my form:

<h1><p style="color:white">Question 1</p></h1>
<div class="wrapper">
 <input type="radio" name="q1" id="option-1" value="yes">
 <input type="radio" name="q1" id="option-2" value="maybe">
 <input type="radio" name="q1" id="option-3" value="no" checked>
   <label for="option-1" class="option option-1">
     <div class="dot"></div>
      <span>Yes</span>
      </label>
   <label for="option-2" class="option option-2">
     <div class="dot"></div>
      <span>Maybe</span>
   </label>
      <label for="option-3" class="option option-3">
     <div class="dot"></div>
      <span>No</span>
      </label>
		</div>
		<br>

It works like a charm! But then I try to make an additional question (just duplicating the above section) any answer selected on question 2 only changes the selection on question 1 and only changes colors there. I know that radio forms IDs need to be unique and names need to be sectioned by group. But the only way I have been able to make this work is to create additional lines of CSS for EVERY answer to every question?! Is that real? Am I going to need to make 600 lines of CSS for each response even thought there are only 3 colors I want them changing to? I feel like I must be missing something easy but I cannot put my finger on it. I know that CSS is made to be able to quickly modify across the whole document, so there must be a simpler answer. I have been searching for a few days for an answer to this but everyone only ever illustrates it with the first question, it is beyond that that I have issues.

Here is the document in full - showing the issue happening in part due to the common IDs, but I want to illustrate the problem. Thanks for your help in advance!

<!DOCTYPE html>
<html>
<head>
<style>
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
 
	*{
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
 /* height: 5%;*/
  place-items: center;
  align-content: center;
/*  background: #555555;*/
		background-color: rgb(32, 32, 32);
        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" />, rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
  font-family: 'Lato', sans-serif;
}
 
.question{
  display: grid;
  background: #fff;
  height: 100px;
  width: 500px;
  align-items: center;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 75px;
  width: 325px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper .option{
  background: #fff;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #808080;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.5s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1{
  border-color: #00D000;
  background: #00D000;
}
   #option-2:checked:checked ~ .option-2{
  border-color: #FFC300;
  background: #FFC300;
}
   #option-3:checked:checked ~ .option-3{
  border-color: #FF2D00;
  background: #FF2D00;
}
		/*color dot hole when selected*/
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot{
  background: #fff;
}
		/*size and opacity of dot when selected*/
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before{
  opacity: 1;
  transform: scale(1);
}
		/*color of text of answer when not selected*/
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
	/*color of text of answer when selected*/
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span{
  color: #fff;
}
 
</style>
<title>Questionnaire</title>
</head>
<body>
	<center>
	<br>
	<form action="/action_page.php">
<div class="question">
	<p><h1><center>Section #1 of survey</center></h1></p>
	<p><center><small>Subtext</small></center></p>
	<p><center><small><p><a href="https://www.wikipedia.org/" target="_blank" rel="noopener noreferrer">Learn More</a></p>
</small></center></p>
	</div>
	<br>
	<h1><p style="color:white">Question 1</p></h1>
<div class="wrapper">
 <input type="radio" name="q1" id="option-1" value="yes">
 <input type="radio" name="q1" id="option-2" value="maybe">
 <input type="radio" name="q1" id="option-3" value="no" checked>
   <label for="option-1" class="option option-1">
     <div class="dot"></div>
      <span>Yes</span>
      </label>
   <label for="option-2" class="option option-2">
     <div class="dot"></div>
      <span>Maybe</span>
   </label>
      <label for="option-3" class="option option-3">
     <div class="dot"></div>
      <span>No</span>
      </label>
		</div>
		<br>
	<br>
	<h1><p style="color:white">Question 2</p></h1>
<div class="wrapper">
 <input type="radio" name="q2" id="option-1" value="yes">
 <input type="radio" name="q2" id="option-2" value="maybe">
 <input type="radio" name="q2" id="option-3" value="no" checked>
   <label for="option-1" class="option option-1">
     <div class="dot"></div>
      <span>Yes</span>
      </label>
   <label for="option-2" class="option option-2">
	   <div class="dot"></div>
      <span>Maybe</span>
   </label>
      <label for="option-3" class="option option-3">
     <div class="dot"></div>
      <span>No</span>
      </label>
		</div>
</form>
	</center>
	</body>
</html>

Tags:

CSS styling on Radio buttons stops working after one radio group

User login

Navigation