CSS styling on Radio buttons stops working after one radio group

Submitted by bosstones737 on Mon, 2021-09-27 19:16

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.

lightening strikes animation on webpage

Submitted by gabrielaspreda on Tue, 2021-04-06 23:02

hello, i need help;
ive used https://codepen.io/tmrDevelops/pres/jPayjd and basically copy pasted the code, but i need it to go over the whole page and i want to change the backround to invisible, so i basically only have the lightneing strikes.... can someone help me out?

Styling elements

Submitted by Ninja2112 on Fri, 2015-05-08 13:30

Hello...

How can I style a specific form element ? For example..I wish to change the size
of a text box, add color,..etc...

CSS keyframes overlap despite animation timing

Submitted by Liloush on Sat, 2014-11-22 15:02

Being relatively new to coding, I have created an animated banner in HTML and CSS, and got everything to work properly. (I'm building this on a local system, so images are not uploaded to server but are on my computer).

The animation is one image come up first for a few seconds then quickly fades out, then second image comes in and fades out, the 3rd comes in and fades out, and all of this loos indefinitely.

The problem I have is that the second "slide" reappears at the same time as the 3rd, lasts longer, therefore delaying the beginning of the loop with the first slide.

Rounding Boxes Styling Issues

Submitted by kinkladze09 on Mon, 2013-02-18 22:05

Hi All,

I am trying to convert an existing square box to one with rounded edges. I had the existing CSS below and added the last two lines after searching around the web. Is this code right to give me the rounded edges effect? Any help would be appreciated. Thanks

#obo_slider .oneByOne_item span.slide2Txt3{
position: relative;
clear: left;
float: left;
margin: 6px 12px 0 120px;
color: #666666;
font-size: 12px;
background: #FFFFFF;
padding: 8px;
-moz-border-radius: 25px 10px/ 10px 25px;
border-radius: 25px 10px/ 10px/ 25px;
}

Syndicate content