Styling Radio Button When Selected Not Working-CodePudding

I am embedding some outdated and non-responsive 3rd party donation form code into our website and have been successful in styling some features, but stuck on styling the new radio button when it is selected. I have researched for hours and used known good code for this option, but it's not playing well with the 3rd party code.

Is there another way I can write the following to work with the 3rd party HTML?

.radio input[type="radio"]:checked    label {
background-color: #bfb;
}

NOTE: The "<div .radio" to style the buttons. I have tried using multiple classes when styling, ie. ".field.radio" with no luck.

3rd Party HTML Radio Buttons I'm Trying To Style

'<div  >'   
'<label for="23552"><input id="23552" name="donation-level"  
type="radio" value="25.000000" maxlength="255"></input><span 
>$25.00</span></label>'   
'</div>'
'<div  >'   
'<label for="23553"><input id="23553" name="donation-level"  
type="radio" value="50.000000" maxlength="255"></input><span 
>$50.00</span></label>'   
'</div>'   
'<div  >'   
'<label for="23554"><input id="23554" name="donation-level"  
type="radio" value="100.000000" maxlength="255"></input><span 
>$100.00</span></label>'   
'</div>'   
'<div  >'   
'<label for="23555"><input id="23555" name="donation-level"  
type="radio" value="500.000000" maxlength="255"></input><span 
>$500.00</span></label>'   
'</div>'   
'<div  >'   
'<label for="23556"><input id="23556" name="donation-level"  
type="radio" value="1000.000000" maxlength="255"></input><span 
>$1,000.00</span></label>'   
'</div>'   
'<div  >'   
'<label for="other-option"><input id="other-option" name="donation-level" 
 type="radio" maxlength="255"></input><span 
>Other</span></label>'   
'</div>'   
'<div  >'   
'<input id="other-amount" name="other-amount"  type="text" 
placeholder="$0.00"></input>'   
'</div>'   
''   
'</div>'

CSS

<style>

.radio {
  margin: 10px;
  accent-color: blue;}

.radio input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 100%;}

.radio label {
  background-color: #dddddd;
  padding: 10px 10px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 0px solid #444;
  border-radius: 4px;
  width: 90%;
  text-align: center;}

.radio label:hover {
  background-color: #8eeefc;
  color: #ffffff;}

.radio input[name="donation-level"]:focus   label {
  border: 2px dashed #444;}

.radio input[name="donation-level"]:checked    label {
  background-color: #bfb;}

input[type='text'] { font-size: 14px; }
input[type='date'] { font-size: 14px; }
input[type='email'] { font-size: 14px; }
input[type='tel'] { font-size: 14px; }

input[type='number'] { font-size: 14px; }

input[type='zip-code'] { font-size: 14px; }

textarea[type='street-address'] { font-size: 14px; }

textarea[type='comment'] { font-size: 14px; }

select[type='state'] { font-size: 14px; }

select[type='country'] { font-size: 14px; }

select[type='province'] { font-size: 14px; }

select[type='frequency'] { font-size: 14px; }

</style>

New Donation Page URL: https://www.ip3action.org/donate-2

CodePudding user response：

Move your radio button tags so that they are not nested within the label. Format them so they look like the following:

<div  >
  <input id="23552" name="donation-level"  type="radio" 
         value="25.000000" maxlength="255">
  <label for="23552"><span >$25.00</span></label>
</div>

I think this is because the CSS selector (Adjacent Sibling Selector) you are trying to use is looking for the next label after your checked radio button within your div. However, there is not a label after your radio button (in the HTML the label starts before the radio button) so the CSS is not applied.

CodePudding user response：

Sign: is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first. now your 3rd Party HTML Radio Buttons are child of your label element not sibling

//This will not work because it requests the label sibling that comes immediately after
//the input type radio, 
.radio input[type="radio"]:checked    label {
background-color: #bfb;
}

//and the input element in your HTML structure is a child of the label element here
'<div  >'   
'<label for="23552"><input id="23552" name="donation-level"  
type="radio" value="25.000000" maxlength="255"></input><span 
>$25.00</span></label>'   
'</div>'

You can either change the structure to something like this one or come up with another way to accomplish your goal.

//HTML
<div  >
<input id="23552" name="donation-level"  
type="radio" value="25.000000" maxlength="255"></input>
<label for="23552"><span >$25.00</span></label> 
</div>

//CSS from your code
.radio input[type="radio"]:checked    label {
  background-color: #bfb;
};