HTML5 评分星级组件

2025/11/28 4:00:37 来源：https://blog.csdn.net/qq_24459277/article/details/144759924 浏览: 次关键词：HTML5 评分星级组件

HTML5 的评分星级（Rating Stars）组件可以让用户通过点击星星来对产品、服务或内容进行评分。以下是关于如何实现评分星级组件的详细说明。

HTML5 评分星级组件

1. 基本结构

使用 <input> 元素配合 <label> 元素可以创建一个简单的评分星级组件。下面是基本的实现代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评分星级组件</title><style>.rating {direction: rtl; /* 使星星从右到左排列 */display: inline-block;}.rating input {display: none; /* 隐藏原始输入框 */}.rating label {font-size: 30px; /* 设置星星大小 */color: lightgray; /* 未选中的星星颜色 */cursor: pointer;}.rating input:checked ~ label {color: gold; /* 选中的星星颜色 */}.rating label:hover,.rating label:hover ~ label {color: gold; /* 悬停时星星颜色 */}</style>
</head>
<body><h1>请给我们评分</h1><form><div class="rating"><input type="radio" id="star5" name="rating" value="5"><label for="star5">★</label><input type="radio" id="star4" name="rating" value="4"><label for="star4">★</label><input type="radio" id="star3" name="rating" value="3"><label for="star3">★</label><input type="radio" id="star2" name="rating" value="2"><label for="star2">★</label><input type="radio" id="star1" name="rating" value="1"><label for="star1">★</label></div><button type="submit">提交评分</button></form>
</body>
</html>

2. 代码解释

HTML 结构:
- 使用五个 <input type="radio"> 元素表示五颗星，每颗星对应一个评分。
- 每个 <input> 元素都有一个对应的 <label>，点击星星会选择相应的评分。
CSS 样式:
- direction: rtl; 使星星从右到左排列，符合评分习惯。
- 隐藏原始的输入框，只通过标签显示星星。
- 选中的星星和悬停时的星星颜色通过 CSS 控制。