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

Design help Custom code
1

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:

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

2

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

3

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.

4

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.

5

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

6

Thank for this, it works well, Richard

7

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

Just some animations for the text on hover.