How to set the colour of all previous <i>element tag star icons after a star is clicked for a star-rating feature? RRS feed

  • Question

  • User-139700499 posted

    I am created a star-rating system from scratch and I have been able to change the colour of a star on hover and also change all preceding stars on hove with the following code: 

    <div class="rating">
                                <input type="radio" name="rating" id="str5" class="rating-input" value="5">
                                <label for="str5" title="5 star" class="rating-label"></label>
                                <i id="str5" aria-hidden="true" class="material-icons star-5">star</i>
                                <input type="radio" name="rating" id="str4" class="rating-input" value="4">
                                <label for="str4" title="4 star" class="rating-label"></label>
                                <i id="str4" aria-hidden="true" class="material-icons star-4">star</i>
                                <input type="radio" name="rating" id="str3" class="rating-input" value="3">
                                <label for="str3" title="3 star" class="rating-label"></label>
                                <i id="str3" aria-hidden="true" class="material-icons star-3">star</i>
                                <input type="radio" name="rating" id="str2" class="rating-input" value="2">
                                <label for="str2" title="2 star" class="rating-label star-2"></label>
                                <i id="str2" aria-hidden="true" class="material-icons">star</i>
                                <input type="radio" name="rating" id="str1" class="rating-input" value="1">
                                <label for="str1" title="1 star" class="rating-label star-1"></label>
                                <i id="str1" aria-hidden="true" class="material-icons">star</i>

    And CSS:

        display: inline-block;
        overflow: hidden;
        direction: rtl;
        display: none !important;
    .rating-input {
        float: right;
        width: 16px;
        height: 16px;
        padding: 0;
        margin: 0 0 0 -16px;
        opacity: 0;
    .rating .material-icons{
        font-size: 40px;
        color: #5a5a5a;
        cursor: pointer;
        float: right;
        display: block;
    .rating .material-icons:hover,
    .rating .material-icons:hover ~ .material-icons{
        color: #ffd800;

    However, I was trying to make the preceding stars stay yellow when they are clicked, but it is not working. The image icon is from the Google MAterialize CSS library, so when trying to follow this tutorial: https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html , I couldn't continue the final part since I am using the <i> tag for the star icon and for the ~ symbol to work in CSS, it can only select siblings. 

    This piece of code from the tutorial does not work for me:

    .rating .material-icons:hover, .rating .material-icons:hover ~ .material-icons, .rating-input:checked ~ .rating .material-icons{ color: #ffd800; }

    I would highly appreciate if someone could help me continue on with the way I am developing it. Thank you. 

    Saturday, March 31, 2018 9:32 PM


All replies