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

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

P粉602998670

发布： 2025-12-04 16:13:02

原创

816人浏览过

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

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

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

NameGPT

免费的名称生成器，AI驱动在线生成企业名称及Logo

查看详情

基本结构与原理

控件由一组 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伪类改变样式的详细内容，更多请关注php中文网其它相关文章！