Skip to content

Instantly share code, notes, and snippets.

@shadiabuhilal
Created July 22, 2017 06:25
Show Gist options
  • Save shadiabuhilal/4e7a571ffe40f18d476b2ff22a6c009b to your computer and use it in GitHub Desktop.
Save shadiabuhilal/4e7a571ffe40f18d476b2ff22a6c009b to your computer and use it in GitHub Desktop.
Integrating CSS star rating into an HTML form
<style>
.txt-center {
text-align: center;
}
.hide {
display: none;
}
.clear {
float: none;
clear: both;
}
.rating {
width: 90px;
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
position: relative;
}
.rating > label {
float: right;
display: inline;
padding: 0;
margin: 0;
position: relative;
width: 1.1em;
cursor: pointer;
color: #000;
}
.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
color: transparent;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
content: "\2605";
position: absolute;
left: 0;
color: #FFD700;
}
</style>
<div class="txt-center">
<form>
<div class="rating">
<input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
<label for="star5" >☆</label>
<input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
<label for="star4" >☆</label>
<input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
<label for="star3" >☆</label>
<input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
<label for="star2" >☆</label>
<input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
<label for="star1" >☆</label>
<div class="clear"></div>
</div>
</form>
</div>
@Greeblood
Copy link

Greeblood commented Apr 24, 2024

How to adjust size of the stars ?

here is what i did and allows you to freely customise the size of the stars size.

`<style>

.txt-center {
text-align: center;
}
.hide {
display: none;
}

.clear {
    float: none;
    clear: both;
}

.rating {
    width: auto;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
    position: relative;
}

    .rating > label {
        float: none;
        display: inline;
        padding: 0;
        margin: 0;
        position: relative;
        width: 1.1em;
        cursor: pointer;
        color: #000;
        font-size: 36px;  /*Right here is where you change the size*/ 
    }

        .rating > label:hover,
        .rating > label:hover ~ label,
        .rating > input.radio-btn:checked ~ label {
            color: transparent;
        }

            .rating > label:hover:before,
            .rating > label:hover ~ label:before,
            .rating > input.radio-btn:checked ~ label:before,
            .rating > input.radio-btn:checked ~ label:before {
                content: "\2605";
                position: absolute;
                left: 0;
                color: #FFD700;
            }

</style>`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment