Changing colors of radio buttons based on Value

SOLVE
oscarlechago
Participant

I am trying to make a Radio button that has different background colors based on its value.

i.e.: between 1 and 4: Red, between 5 and 7: Orange and between 8 and 10: Green

 

So far, in the Settings > Advanced Options > Head HTML I pasted this code and I am able to show a color on hover and a color when checked, but not what I wanted (if the color on checked may be variable, it could also do the thing... I just want to be able to indicate how we consider the values):

<style>
.hs-form-radio{
  display: inline-block;
}

.hs-form-radio input[type="radio"]{
  display: none;
}
.hs-form-radio:hover label, .hs-form-radio:hover .hs-form-radio label {
  color: Yellow;
}

.hs-form-radio label.hs-form-radio-display input[type="radio"]:checked + span{
  background-color: #FF6A39;
  color: white;
}

.hs-form-radio label.hs-form-radio-display span{
  background-color: white;
  border: 1px solid grey;
  padding: 12px 15px;
}
</style>

And this is how it looks so far:

Radiobuttons.JPG

Can anybody help me out?

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
prosa
Solution
Top Contributor

Hi oscar, I would add 3 classes to your css styles and use javascript to grab all the input[type=checkbox] inside that container, then walk the array and add the classes based on the value, then use the new classes to add the color using the :checked state. just remember to use the function .ready(function(){ ... code}) to make sure your form is fully loaded. 

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.

View solution in original post

2 Replies 2
prosa
Solution
Top Contributor

Hi oscar, I would add 3 classes to your css styles and use javascript to grab all the input[type=checkbox] inside that container, then walk the array and add the classes based on the value, then use the new classes to add the color using the :checked state. just remember to use the function .ready(function(){ ... code}) to make sure your form is fully loaded. 

If this post helped you resolve your issue, please consider marking it as the solution. Thank you for supporting our HubSpot community.

View solution in original post

oscarlechago
Participant

Thank Prosa, but could you help me a bit with the code? 

I'm sure that if I were a programmer your solution would be great, but I had to find out the code I showed mixing from different sources, so some examples on how grab the input from the radio buttons would be extremely helpful!

0 Upvotes