Streaming live at 10am (PST)

How to Implement custom html and css for 5star rating in Webflow

Hello in time like these i say i depend on webflow way too much
im trying to a rating system on each (dynamic) company location on the site i’m working on

I found this on the this internet :wink: now how to implement it - any ideas?
Please help

ref:
http://www.dillerdesign.com/css/cookbook/component_star_rater.html

html:

<div class="starRate">
<div>Currently rated: 3 stars<b></b></div>
<ul>
<li><a href="#"><span>Give it 5 stars</span></a></li>
<li><a href="#"><span>Give it 4 stars</span></a></li>
<li><a href="#"><span>Give it 3 stars</span><b></b></a></li>
<li><a href="#"><span>Give it 2 stars</span></a></li>
<li><a href="#"><span>Give it 1 star</span></a></li>
</ul>
</div>

css:

/* 'star-rating' component */
.starRate {position:relative; margin:20px; overflow:hidden; zoom:1;}
.starRate ul {width:160px; margin:0; padding:0;}
.starRate li {display:inline; list-style:none;}
.starRate a, .starRate b {background:url(img/star_rate.gif) left top repeat-x;}
.starRate a {float:right; margin:0 80px 0 -144px; width:80px; height:16px; background-position:left 16px; color:#000; text-decoration:none;}
.starRate a:hover {background-position:left -32px;}
.starRate b {position:absolute; z-index:-1; width:80px; height:16px; background-position:left -16px;}
.starRate div b {left:0px; bottom:0px; background-position:left top;}
.starRate a span {position:absolute; left:-300px;}
.starRate a:hover span {left:90px; width:100%;}

#OR

ref:
https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html

html:

<span class="rating">
    <input type="radio" class="rating-input"
           id="rating-input-1-5" name="rating-input-1">
    <label for="rating-input-1-5" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-4" name="rating-input-1">
    <label for="rating-input-1-4" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-3" name="rating-input-1">
    <label for="rating-input-1-3" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-2" name="rating-input-1">
    <label for="rating-input-1-2" class="rating-star"></label>
    <input type="radio" class="rating-input"
           id="rating-input-1-1" name="rating-input-1">
    <label for="rating-input-1-1" class="rating-star"></label>
</span>

css:

.rating {
    overflow: hidden;
    display: inline-block;
}

.rating-input {
    float: right;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0 0 0 -16px;
    opacity: 0;
}

.rating-star {
    cursor: pointer;
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    background: url('/samples/star-rating/star.png') 0 -16px;
}

.rating-star:hover {
    background-position: 0 0;
}

.rating-star {
    position: relative;
    float: right;
    display: block;
    width: 16px;
    height: 16px;
    background: url('/samples/star-rating/star.png') 0 -16px;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star {
    background-position: 0 0;
}

.rating-star:hover,
.rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
    background-position: 0 0;
}

.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
    background-position: 0 0;
}

.rating-star,
.rating:hover .rating-star {
    position: relative;
    float: right;
    display: block;
    width: 16px;
    height: 16px;
    background: url('/samples/star-rating/star.png') 0 -16px;
}

Please help

1 Like

Hi @Dennis_Williams,

This is pretty cool. I haven’t had a need for this, but I may try to implement it some time.

I tinkered with it really quickly and was able to get the second reference working (includes inputs).

You can take a look at my Webflow share link (note - the implementation will only work once you publish the site): https://preview.webflow.com/preview/star-rating-template?preview=d1caa2ae914e64191c4dc5674495b2a0

Also, see it in action at the following URL: http://star-rating-template.webflow.io/

Hopefully this helps :blush:
-Micah

1 Like

Hmm, I hope you realize that having the rating UI and actually saving the rating are two different things. You can do the first in Webflow, but not the latter.

2 Likes

You are absolutely right, @samliew.

Do you think this could be implemented using Zapier? Utilizing the inputs within a form that can be calculated within a spreadsheet and then presented within Webflow?

I definitely don’t know if this would work. Just providing an idea.

This is definitely an interesting idea. Should be possible but will require lots of custom code.

Thank for this, it works well, Richard

https://star-rating.webflow.io/

Just some animations for the text on hover.