Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a 5 Star Skills Rating Bar using CSS
A 5 Star skill rating bar is an essential element for any portfolio website in showcasing ratings and achievements. The rating bar is responsive and can be used on various devices. Here, we have used radio buttons to create the rating bar.
Algorithm
Create an HTML document with a head and body section.
Set the background color and center the contents of the body using CSS.
Style the rating element with font size, direction, and display properties.
Hide the radio buttons and style the label elements to display them as blocks.
Use CSS to add interactivity to the label elements using the :hover, :checked, and ~ selectors.
Create a div element with the rating class in the body section.
Add five radio input elements with different values and ids.
Add five label elements with the text content of a star symbol and a matching attribute to the corresponding radio input id.
Example
<!DOCTYPE html>
<html>
<head>
<title>5-Star Skills Rating Bar</title>
<!-- The following CSS styles the rating bar and allows for customization -->
<style>
/* The body is styled to center the rating bar and give it a background color */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #a2f9ff;
}
/* The rating class is used to style the rating bar and make it responsive */
.rating {
font-size: 0; /* Remove any font size */
direction: rtl; /* Set direction to right-to-left for proper star display */
}
/* Hide the radio input element of the rating bar */
.rating input {
display: none;
}
/* Style the label elements to display as stars and to allow for interactivity */
.rating label {
display: inline-block;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
font-size: 24px;
text-align: center;
line-height: 20px;
cursor: pointer;
color: #ccc;
transform: rotateY(180deg); /* Flip the star to display properly */
}
/* Style the label elements when hovered over or checked */
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
color: #f90; /* Change the color of the star to yellow when hovered over or checked */
}
</style>
</head>
<body>
<!-- The rating class is used to create the rating bar using radio input elements and labels -->
<div class="rating">
<input type="radio" name="rating" id="rating-1" value="1" />
<label for="rating-1">★</label>
<input type="radio" name="rating" id="rating-2" value="2" />
<label for="rating-2">★</label>
<input type="radio" name="rating" id="rating-3" value="3" />
<label for="rating-3">★</label>
<input type="radio" name="rating" id="rating-4" value="4" />
<label for="rating-4">★</label>
<input type="radio" name="rating" id="rating-5" value="5" />
<label for="rating-5">★</label>
</div>
</body>
</html>
Instead of using radio buttons, developers can use other input types like range sliders, checkboxes, or text inputs to allow users to provide more detailed feedback.
For websites that require a different rating scale, developers can modify the CSS styling and HTML markup to accommodate different rating options. JavaScript can be used to add more interactive features to the rating bar, such as displaying the current rating or showing a message after the user submits their rating.
Conclusion
As ratings and feedback bars, they can be used in e−commerce websites, mobile apps, online product reviews, and many more to elevate user experience and satisfaction. We have used icons and not images which makes it easy to style and resize, unlike images. The rating bar is responsive and can be used on various devices.
The CSS styling allows for customization of the rating bar's appearance to fit any website design.
570 Views
