Question

I'm doing a project in codeIgniter and i have a form which is used to rate a product.

When i clicked a button(star) i need to make the whole button(star) to change its

colour into yellow.I did this but it only changes the border colour into yellow.Middle

of the button remains in white. can anyone please explain me how to do that?

<h1><div class="rating" style="width:200px;float:left;padding-left:1px">
                                    <span id="span1" onclick="document.getElementById

('rateText').innerHTML='Excellent', setColor(this.id);">   ?   </span> 
                                    <span id="span2" onclick="document.getElementById

('rateText').innerHTML='Good', setColor(this.id);">   ?   </span> 
                                    <span id="span3" onclick="document.getElementById

('rateText').innerHTML='Okay', setColor(this.id);">   ?   </span>
                                    <span id="span4" onclick="document.getElementById

('rateText').innerHTML='Unsatisfied', setColor(this.id);">   ?   </span>
                                    <span id="span5" onclick="document.getElementById

('rateText').innerHTML='Terrible', setColor(this.id);">   ?   </span>
                                    </div></h1>

<div style="float:right;padding-right:450px">
        <h3><p id="rateText"></p></h3>
</div>

Javascript This code changes the button colour when button is clicked

<script type="text/javascript">
function setColor(btn){
    var property = document.getElementById(btn);
    property.style.color = "#FFFF00"
}
</script>

CSS This code link the buttons and change colour on mouse hover

<style type="text/css">
    #rateText{

    text-align:right;

    }
    .rating {
    unicode-bidi: bidi-override;
    direction: rtl ;
    }

    .rating > span:hover:before,
    .rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: #FFFF00;
    }

</style>

Answer 1

You need to apply the same style as for :hover selector. For instance you can add .active class to clicked star. Check the css and js code below.

.rating > span.active:before,
.rating > span:hover:before,
.rating > span:hover ~ span:before
{
    content: "\2605";
    position: absolute;
    color: #FFFF00;
}

function setColor(btn){
        var property = document.getElementById(btn);
        property.classList.add('active');
}

how to color the whole star icon when button is clicked

1 个答案: