Close

Star Rating Form

This is an example of a simple star rating form, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. The form is given the styles of display as flex, flex-wrap as wrap, height as 100vh, align-items as center, justify-content as center, and padding as 0 20px. The rating label has the styles of cursor as pointer to get the hand cursor effect on a hover event, width and height as 40px, background-size as 76%, and margin-top as auto. The feedback container is given the styles of max-width as 360px, background-color as #fff, width as 100%, padding as 30px, border-radius as 8px, display as flex, flex-direction as column, flex-wrap as wrap, align-items as center, and box-shadow as 0 4px 30px rgba(0,0,0,.05). The container consists of five feedback stars with five emoji’s to appear according to the rating given, which is implemented by the transform styles on the rating labels. Rating 1 has the transform style of translateY(-100px), rating 2 has the transform style of translateY(-200px), rating 3 is given a transform style of translateY(-300px), rating 4 has translateY(-400px), and rating 5 is given the transform style of translateY(-500px). Source: https://codepen.io/knyttneve/pen/EBNqPN

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.