<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Rating</title>
<style>
.rating {
display: inline-block;
unicode-bidi: bidi-override; /* fix for RTL languages */
direction: rtl; /* put stars in reverse order */
}
.rating > input {
display: none;
}
.rating > label {
position: relative;
display: inline-block;
font-size: 2em;
color: #ccc; /* default color */
cursor: pointer;
}
.rating > label::before {
content: "\2605"; /* full star */
position: absolute;
right: 0;
}
.rating > input:checked ~ label,
.rating > label:hover,
.rating > label:hover ~ label {
color: gold; /* color when checked or hovered */
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label {
color: #e6c300; /* slightly darker gold on hover when checked */
}
</style>
</head>
<body>
<div class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1 star"></label>
</div>
</body>
</html>
Explanation:
-
HTML Structure: We use radio inputs for each star rating and labels associated with them. The labels are what the user clicks on.
-
CSS Styling:
display: inline-blockallows the rating to sit inline with other elements.unicode-bidi: bidi-override;anddirection: rtl;are crucial. They visually reverse the order of the stars so they display correctly even though we're using the~(general sibling combinator) which selects following siblings.display: none;hides the default radio buttons.::beforecreates the star character (★) using the Unicode escape sequence\2605.:checked ~ labelstyles the labels following a checked radio button (and their siblings).:hoverstyles the label being hovered over and its following siblings.- The combined
:checkedand:hoverselectors handle the slightly darker gold color when hovering over already-selected stars.
Key improvements over simpler solutions:
- Accessibility: The
titleattribute on each label provides a tooltip for screen readers, improving accessibility. - Correct Visual Order: The
unicode-bidianddirectionproperties ensure the stars display in the correct order, regardless of the reading direction of the user's browser/OS. - Hover Effects: The CSS handles hover effects correctly, including the slightly darker color when hovering over already-selected stars. This provides better user feedback.
- Semantic HTML: Uses radio buttons which are semantically correct for selecting a single rating.
This improved version provides a more robust and user-friendly rating system. You can easily customize the star size, colors, and number of stars by modifying the CSS. You can also use JavaScript to capture the selected rating value if needed for further processing.
标签：rating,hover,checked,评分,label,color,rate,display,css From： https://www.cnblogs.com/ai888/p/18580919