Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 an interactive rating system.
Syntax
.rating {
font-size: 0;
direction: rtl;
}
.rating input {
display: none;
}
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
color: #f90;
}
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
The following example creates an interactive 5-star rating bar using CSS and HTML
<!DOCTYPE html>
<html>
<head>
<title>5-Star Skills Rating Bar</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.rating {
font-size: 0;
direction: rtl;
}
.rating input {
display: none;
}
.rating label {
display: inline-block;
width: 40px;
height: 40px;
margin: 0 2px;
font-size: 30px;
text-align: center;
line-height: 40px;
cursor: pointer;
color: #ddd;
transform: rotateY(180deg);
transition: color 0.2s ease;
}
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
color: #ff6b35;
}
.rating label:hover {
transform: rotateY(180deg) scale(1.1);
}
</style>
</head>
<body>
<div class="rating">
<input type="radio" name="rating" id="rating-5" value="5" />
<label for="rating-5">?</label>
<input type="radio" name="rating" id="rating-4" value="4" />
<label for="rating-4">?</label>
<input type="radio" name="rating" id="rating-3" value="3" />
<label for="rating-3">?</label>
<input type="radio" name="rating" id="rating-2" value="2" />
<label for="rating-2">?</label>
<input type="radio" name="rating" id="rating-1" value="1" />
<label for="rating-1">?</label>
</div>
</body>
</html>
An interactive 5-star rating bar appears in the center of the page. When hovering over stars, they turn orange and scale up slightly. Clicking a star selects that rating and highlights all stars up to the selected one.
Key Features
The rating bar includes several important CSS features:
Direction RTL: The
direction: rtlproperty ensures proper star highlighting from left to right when using the sibling selector.Hidden Radio Inputs: Radio buttons are hidden using
display: nonewhile labels provide the visual interface.Hover Effects: The
:hoverand sibling selector~create interactive feedback.Smooth Transitions: CSS transitions provide smooth color changes and scaling effects.
Customization Options
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.
Conclusion
The 5-star rating bar is perfect for e-commerce websites, mobile apps, and online product reviews to enhance user experience. Using star symbols instead of images makes it easy to style, resize, and maintain across different devices and screen sizes.
1K+ Views
