Как перебрать от 0 до 10, и мне нужно изменить цвет переключателя для первых 0-6 красного и 7-8 желтого и 9-100 зеленого?

Question

Мне нужно, чтобы цвет переключателя был 0-6 красным, 7-8 желтым и 9-10 зеленым. Как решить эту проблему? Я не могу изменить существующий bootstrap цвет ..

 <s:iterator begin="0" end="10" var="i">
     <li class="rating list-group-item ratingAlign list${i}" style="line-height:8px;">
           <p style="color:red;">${i}</p><br/>
                    <input type="radio" id="initialSetupRating${i}"  name="initialSetup.rating" value="${i}" onclick="changeColor(initialSetupRating${i})"/>
            </li>
    </s:iterator>

Он вызывает существующий bootstrap, поэтому я не могу его изменить .. Я прикрепил bootstrap css ниже. Как перевернуть и сохранить цвет в соответствии с моими ожиданиями.

input[type="radio"], input[type="checkbox"] {
    /* margin: 4px 0 0; */
    margin-top: 1px \9;
    /* line-height: normal; */
}

input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}