→ Anonymous
→ Interactive Star Rating

Interactive Star Rating

Forked from> @mason/interactive-star-rating

A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

This bootstrap css example is contributed by Anonymous, on 17-May-2025. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is Vote

Tags: Rating

Author Anonymous

313

v.5.3

Fork Fullscreen

.star-rating input {
        display: none;
    }

.star-rating label {
        color: #ffc107;
        font-size: 24px;
        padding: 0 2px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

.star-rating label:hover,
    .star-rating label:hover~label,
    .star-rating input:checked~label {
        color: fbee20;
    }
</style>

More Examples

Beautiful Rating Component
Take user ratings with this form card

Author:
Mateo Rojas

5 months ago

1k

v.5.3
Rating section
Rating section fit form for taking user ratings and reviews

Author:
Tane Mahuta

11 months ago

1.5k

v.5.3
Star Rating Component

Author:
Alaric Sloane

8 months ago

2.6k

v.5.3
Emoji Rating
An alternative, fun way for users to rate with emojis ranging from angry to love. Hovering over the emojis gives a playful animation effect, encouraging user interaction.

Author:
Mason Ashford

6 months ago

1.5k

v.5.3
Interactive Star Rating
A dynamic star rating component where users can select their rating by clicking on stars. The rating can range from 1 to 5 stars, offering immediate visual feedback on hover and selection.

Author:
Mason Ashford

6 months ago

6.5k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

9 months ago

5.1k

v.4.6
404 error page template

Author:
Ross Wille

11 months ago

2k

v.5.3
Continue with google button

Author:
Noah Kim

1 year ago

4.4k

v.4.6
Minimal Pagination

Author:
Levi Treadwell

5 months ago

591

v.5.3
Simple portfolio card

Author:
Maria Garcia

11 months ago

655

v.5.3
Split Landing Page
Split Landing Page

Author:
Rami AlAjo

3 months ago

616

v.4.6
Animated hero section

Author:
Anonymous

1 year ago

4k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent