style rating float left unicode bidi bidi override direction rtl font size 28px margin top 11px color e8d04c margin left 10px margin right 10px rating span display inline block position relative width 0 7em cursor pointer rating span hover before rating span hover span before rating span rated before rating span rated span before content 2605 position absolute style div id divRating class rating span id spanRatingExcellent title Excellent x2606 span span id spanRatingGood title Good x2606 span span id spanRatingFair title Fair x2606 span span id spanRatingPoor title Poor x2606 span span id spanRatingAwful title Awful x2606 span div script document body style height 100pt document getElementById divRating addEventListener click function event if event target tagName toLowerCase span return if event target classList contains rated event target classList remove rated else Array prototype forEach call document getElementsByClassName rated function el el classList remove rated event target classList add rated script style body min height 150pt rating float left not checked is a filter so that browsers that dont support checked dont follow these rules Every browser that supports checked also supports not so it doesnt make the test unnecessarily selective rating not checked input position absolute top 9999px clip rect 0 0 0 0 rating not checked label float right width 1em padding 0 1em overflow hidden white space nowrap cursor pointer font size 200 line height 1 2 color ddd rating not checked label before content 2605 rating input checked label color f70 text shadow 1px 1px c60 2px 2px 940 1em 1em 2em rgba 0 0 0 5 rating not checked label hover rating not checked label hover label color gold text shadow 1px 1px goldenrod 2px 2px B57340 1em 1em 2em rgba 0 0 0 5 rating input checked label hover rating input checked label hover label rating input checked label hover rating input checked label hover label rating label hover input checked label color ea0 text shadow 1px 1px goldenrod 2px 2px B57340 1em 1em 2em rgba 0 0 0 5 rating label active position relative top 2px left 2px style fieldset class rating input type radio id star5 name rating value 5 label for star5 title Rocks label input type radio id star4 name rating value 4 label for star4 title Pretty good label input type radio id star3 name rating value 3 label for star3 title Meh label input type radio id star2 name rating value 2 label for star2 title Kinda bad label input type radio id star1 name rating value 1 label for star1 title Sucks big time label fieldset link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 4 7 0 css font awesome min css style body height 150pt rate color green width 32px font size 28px pick color red style h2 Thumb Rating h2 span id rating span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span script let sel fa fa thumbs up fa fa thumbs o up fa fa circle thin function hover el let def rate pick fa fa thumbs up let rating document getElementById rating for let i 0 i rating children length i rating children i className def if rating children i el def rate fa fa thumbs o up end for i script body link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 4 7 0 css font awesome min css style body height 150pt rate color red width 32px font size 28px pick color blue style h2 Smiley Rating h2 span id rating span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span script function hover el let def rate pick fa fa smile o let rating document getElementById rating for let i 0 i rating children length i rating children i className def if rating children i el def rate fa fa frown o end for i script body
2px left 2px style fieldset class rating input type radio id star5 name rating value 5 label for star5 title Rocks label input type radio id star4 name rating value 4 label for star4 title Pretty good label input type radio id star3 name rating value 3 label for star3 title Meh label input type radio id star2 name rating value 2 label for star2 title Kinda bad label input type radio id star1 name rating value 1 label for star1 title Sucks big time label fieldset link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 4 7 0 css font awesome min css style body height 150pt rate color green width 32px font size 28px pick color red style h2 Thumb Rating h2 span id rating span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span class rate fa fa thumbs o up onmouseover hover this span span script let sel fa fa thumbs up fa fa thumbs o up fa fa circle thin function hover el let def rate pick fa fa thumbs up let rating document getElementById rating for let i 0 i rating children length i rating children i className def if rating children i el def rate fa fa thumbs o up end for i script body link rel stylesheet href https cdnjs cloudflare com ajax libs font awesome 4 7 0 css font awesome min css style body height 150pt rate color red width 32px font size 28px pick color blue style h2 Smiley Rating h2 span id rating span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span class rate fa fa frown o onmouseover hover this span span script function hover el let def rate pick fa fa smile o let rating document getElementById rating for let i 0 i rating children length i rating children i className def if rating children i el def rate fa fa frown o end for i script body