Changing colors of radio buttons based on Value

Developer Support CMS Development
1

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
Radiobuttons.JPG926×241 23.9 KB

Can anybody help me out?

2

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.

3

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!