Changing colors of radio buttons based on Value

[oscarlechago]

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:

Can anybody help me out?

[prosa · Accepted solution]

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. 

[oscarlechago]

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!