css如何制作简易评分星星控件_使用inline-block和hover伪类改变样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css如何制作简易评分星星控件_使用inline-block和hover伪类改变样式

2025-12-04

浏览次数：次

返回列表

使用CSS和隐藏radio实现五星评分控件，通过label与input关联，利用:hover和:checked状态配合兄弟选择器~控制星星高亮，内联SVG作背景图，支持悬停预览与点击选星。

css如何制作简易评分星星控件_使用inline-block和hover伪类改变样式

使用 CSS 制作一个简易的评分星星控件，可以通过 inline-block 布局和 :hover 伪类实现鼠标悬停时高亮星星的效果。结合隐藏的单选按钮（input[type=radio]），还能实现点击选择评分的功能。

MedPeer科研绘图

生物医学领域的专业绘图解决方案，告别复杂绘图，专注科研创新

166 查看详情 MedPeer科研绘图

基本结构与原理

控件由一组 radio input 和对应的 label 组成。每个 label 代表一个星星，通过 CSS 设置为 inline-block 显示，排列成一行。利用 label 的 for 属性绑定到 input，点击 label 即选中对应分数。关键点：

隐藏 input，只保留 label 可见
label 使用背景图显示星星，默认为灰色
鼠标悬停在某个星星上时，该星及其左侧所有星星高亮（利用 hover + 后续兄弟选择器 ~）
选中后的星星保持高亮色，优先级高于 hover 效果

样式控制细节

使用内联 SVG 作为背景图，避免额外资源请求。未选中状态用浅灰色，悬停时变为黄色，选中后为深黄色。核心 CSS 技巧：

display: inline-block 让 label 并排排列
:hover 配合 ~ 选择器，影响后续兄弟元素
input:checked ~ label 实现持久高亮已选星星
将 hover 样式定义在 checked 样式之后，确保悬停时仍可预览更高分

HTML 示例代码

以下是一个完整的五星级评分控件示例：

<div class="star-rating">
  <input type="radio" name="rating" id="star1" value="1"><label for="star1"></label>
  <input type="radio" name="rating" id="star2" value="2"><label for="star2"></label>
  <input type="radio" name="rating" id="star3" value="3"><label for="star3"></label>
  <input type="radio" name="rating" id="star4" value="4"><label for="star4"></label>
  <input type="radio" name="rating" id="star5" value="5"><label for="star5"></label>
</div>

用户悬停时能实时预览评分效果，点击后选定分数，适合用于评价系统。基本上就这些。

以上就是css如何制作简易评分星星控件_使用inline-block和hover伪类改变样式的详细内容，更多请关注其它相关文章！