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.

Order Horizontally instead of Vertically in Layout

Submitted by kurt0123 on Fri, 2021-07-30 06:14

Hello,

My site is based on Joomla and I use k2 extensions to display photos in a Masonry Style (because photos are not of the same height.

The link is here : Photo website dedicated to Mauritius

The photos are displayed correctly but not in the right order.

I would like the output to be:
 
| item 1          | item 2          | item 3          | item 4 
| item 5          | item 6          | item 7          | item 8 
| item 9          | item 10         | item 11         | item 12

problem displaying images as aspect ratio 1:1 (square thumbnails)

Submitted by TheWebDesignCompany on Wed, 2021-06-30 14:30

having an issue with getting images to display as squares in 1:1 aspect ration on wordpress.
Im pulling in Woocomece gallery images and displaying them on the page.

However as you can see in the attached screenshot the object-fill: cover; or object-fill: fill; or even object-fill: none; is not working.
They are all being treated like object-fill: contain; but I need to show square thumbnails for images of all different aspect ratios.

Here is the code I am currently trying to use:

.woocommerce-product-gallery__image {
border: solid 5px #CCC;
background-color: #CCC;

My :hover doesn't work properly, When i hover over the h2's it doesn't underline the h2

Submitted by bwoo on Tue, 2021-04-06 22:42

Puzzled

My home page

h1 {
text-align:center;
margin-top: 50px;
font-family: "Garamond", serif;

}

h2 {
text-align:center;
margin-top: 0px;
font-size: 15px;
font-family: "Garamond", serif;
}

.center {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
float:middle;
}

header > h2 {
color: #2D52A0;
font-family: "Arial", sans-serif;
}

header > h2:hover {
text-decoration: underline;
}

.English {
position: relative;
bottom: 250px;
right: 120px;

}

black text

Submitted by Ae1011 on Wed, 2021-02-17 14:11

Hi,
I edit Wikipedia regularly and I want dark mode so it is easer on my eyes. There is no skin which does this for you there are chrome extension which do it but I find them hard to use and they also slow down my computer. You can add custom css to a skin so I added this to a skin:

body {background-color: rgb(24, 24, 24);}
.cnotice {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    margin-bottom: 1em;
    cursor: pointer;
    color: #222;
    font-weight: 500;
}

Syndicate content