要用css创建自定义评分控件，最核心的思路是利用html中input[type='radio']的天然选中状态管理，将其视觉上隐藏，然后通过与之关联的label标签来承载自定义样式，如星星图标，从而在保留表单语义和可访问性的同时实现外观定制；具体实现时，1. 使用一组name相同的input[type='radio']并设置value表示评分等级，通过id与label的for属性关联；2. 用css将radio设为display: none或移出屏幕以隐藏原生控件；3. 用label::before或图标字体定义星星样式，并设置未选中颜色和悬停效果；4. 利用css兄弟选择器（~）实现悬停和选中时的连贯变色效果，通常将html中radio和label按5到1星倒序排列并配合direction: rtl使视觉上从左到右填充；5. 通过:checked ~ label使选中星及右侧星变色，:hover ~ label实现悬停预览；6. 确保label包含title或aria-label以提升无障碍访问，支持键盘操作；7. 依靠radio的name和value属性确保表单提交时评分数据能被正确采集，无需javascript即可完成基本功能，整体实现兼顾语义化、可访问性、美观与功能性。
要用CSS创建自定义评分控件，最核心的思路是利用HTML中
input[type='radio']的天然选中状态管理，将其视觉上隐藏，然后通过与之关联的
label标签来承载我们想要的样式，比如星星图标。这样既保留了表单元素的语义和可访问性，又能完全自定义外观。
解决方案
创建自定义评分控件，通常我们会用到一组
input[type='radio']元素，每个代表一个评分等级，并给它们赋予一个共同的
name属性，确保它们在同一组中只能单选。然后，每个
radio都通过
id属性与一个
label标签关联起来。
HTML结构大致会是这样：
立即学习“前端免费学习笔记（深入）”；
<div class="rating-container"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5" title="5星"></label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4" title="4星"></label> <input type="radio" id="star3" name="rating" value="3"> <label for="star3" title="3星"></label> <input type="radio" id="star2" name="rating" value="2"> <label for="star2" title="2星"></label> <input type="radio" id="star1" name="rating" value="1"> <label for="star1" title="1星"></label> </div>
关键的CSS部分：
-
隐藏原生的Radio按钮：这是第一步，也是最直接的一步。
.rating-container input[type="radio"] { display: none; /* 或者 position: absolute; left: -9999px; */ }我个人更倾向于
display: none;
，因为它最彻底，但也有人会用position: absolute; left: -9999px;
来确保屏幕阅读器能更好地识别，虽然现代浏览器对display: none
的无障碍性处理也越来越好了。 -
样式化Label标签：
label
才是我们真正要展示给用户的视觉元素。我们可以用字体图标（如Font Awesome的星星），或者SVG，甚至直接用背景图片来作为星星。.rating-container label { font-size: 2em; /* 星星大小 */ color: #ccc; /* 未选中时的颜色 */ cursor: pointer; transition: color 0.2s ease-in-out; /* 平滑过渡 */ /* 如果使用Font Awesome，这里可以加上 */ /* font-family: 'Font Awesome 5 Free'; */ /* font-weight: 900; */ /* content: '\f005'; /* 对应的星星Unicode */ }为了让星星图标显示出来，你可能需要在
label::before
或label::after
中使用content
属性，或者直接在HTML里放<i>
标签作为星星。我通常喜欢用伪元素，因为它更简洁，不需要额外DOM。比如：.rating-container label::before { content: '★'; /* 或者Font Awesome的unicode */ display: inline-block; padding: 0 2px; } -
实现选中和悬停效果：这是最巧妙的部分，利用CSS的相邻兄弟选择器（
+
）和通用兄弟选择器（~
）。.rating-container label:hover, .rating-container label:hover ~ label { color: orange; /* 悬停时，当前及后面的星星变色 */ } .rating-container input[type="radio"]:checked ~ label { color: gold; /* 选中时，当前及后面的星星变色 */ }这里有个小技巧：为了让选中效果从右往左填充（比如点亮5星，则5颗星都亮），你需要将HTML中的
input
和label
的顺序反过来，即5星在最前面，1星在最后面。同时，你可能还需要在.rating-container
上设置direction: rtl;
（从右到左），并在label
上设置direction: ltr;
（让文本方向恢复正常）。/* HTML结构反转 */ <div class="rating-container" style="direction: rtl;"> <input type="radio" id="star5" name="rating" value="5"> <label for="star5" title="5星" style="direction: ltr;"></label> <input type="radio" id="star4" name="rating" value="4"> <label for="star4" title="4星" style="direction: ltr;"></label> <!-- ...以此类推到 star1 --> </div> /* CSS for reversed order */ .rating-container label:hover, .rating-container label:hover ~ label, .rating-container input[type="radio"]:checked ~ label { color: gold; /* 悬停或选中时，当前及“前面”（视觉上是右边）的星星变色 */ } /* 额外：如果想让当前选中的星也变色，但不是通过 ~ 选择器，可以这样 */ .rating-container input[type="radio"]:checked + label { color: gold; }我个人觉得
direction: rtl;
这个方案虽然巧妙，但有时候会觉得有点“反直觉”，维护起来可能需要多想一步。直接调整HTML顺序然后用~
选择器是更直接的。
为什么选择隐藏Radio而不是其他元素？
这其实是个很经典的Web开发问题，我记得刚开始学的时候也纠结过，为什么不直接用
<div>或
<span>来做星星，然后用JavaScript去控制状态呢？答案在于语义化、可访问性和浏览器原生行为的复用。
input[type='radio']是专门为“从一组选项中选择一个”这种场景设计的HTML元素。它自带了单选的逻辑，你不需要写一行JavaScript就能实现点击一个星星，其他星星自动取消选中。如果用
div或
span，你需要自己编写复杂的JavaScript来管理选中状态、互斥逻辑，这不仅增加了代码量，也更容易引入bug。
更重要的是，从可访问性（Accessibility）的角度来看，隐藏
radio按钮但保留其在DOM中的存在，意味着屏幕阅读器仍然可以识别这是一个表单控件，用户可以通过键盘（Tab键切换，方向键选择）进行操作。
label标签的
for属性与
input的
id关联，也大大增强了可点击区域和可访问性。纯粹的
div或
span在没有额外
role和
aria-*属性加持下，对辅助技术来说是“无意义”的。所以，与其重新发明轮子，不如巧妙地利用现有轮子的核心功能，只替换其外观。这是一种很优雅的解决方案。
如何实现星级评分的选中与悬停效果？
实现星级评分的选中和悬停效果，CSS的通用兄弟选择器（~
）是核心。它允许你选择同一父元素下，位于指定元素之后的所有兄弟元素。
以我们上面HTML结构为例（假设我们已经按照5星在前，1星在后的顺序排列，并设置了
direction: rtl;）：
-
悬停效果：当鼠标悬停在某个
label
上时，我们希望该label
以及它“后面”（在HTML结构中，也就是视觉上它“左边”的那些星星，因为direction: rtl;
）的所有label
都变色。.rating-container label:hover, .rating-container label:hover ~ label { color: orange; /* 悬停时，当前label及其“视觉左侧”的兄弟label变色 */ }这里的
label:hover ~ label
是关键。当你鼠标移到star3
对应的label
上时，它会选中star3
的label
以及它后面（HTML顺序上）的star2
和star1
的label
。由于direction: rtl;
的作用，这些label
在视觉上正好是star3
的左边。 -
选中效果：当某个
radio
被选中时，我们希望它所对应的label
以及其“后面”的所有label
都保持选中颜色。.rating-container input[type="radio"]:checked ~ label { color: gold; /* 当某个radio被选中时，它后面的所有兄弟label都变色 */ }这个选择器非常强大。当
star4
的input
被checked
时，input[id="star4"]:checked ~ label
会选中所有位于star4
之后（HTML顺序）的label
，即star3
、star2
、star1
的label
。结合direction: rtl;
，这就实现了从选中星星到最右边星星的填充效果。一个常见的“陷阱”是，如果你想让“选中”的星星颜色比“悬停”的星星更突出，或者颜色不同，你需要确保
checked
状态的CSS规则优先级高于hover
状态。通常，因为input[type="radio"]:checked ~ label
更具体，它的优先级会更高，所以它会覆盖hover
的颜色。但如果遇到问题，可以考虑增加选择器的特异性。
自定义评分控件的无障碍性与表单提交考量
构建自定义控件，除了好看，更要好用，并且对所有用户友好。这就涉及到无障碍性和表单提交的实际考量。
无障碍性（Accessibility）： 虽然我们视觉上隐藏了
radio按钮，但它在DOM中依然存在，并且通过
label的
for属性与
input的
id关联，这对于屏幕阅读器来说至关重要。屏幕阅读器会读出
label的内容（比如“5星”），并且识别出这是一个可交互的表单元素。用户可以通过键盘的Tab键聚焦到评分控件，然后使用方向键（通常是左右方向键）来选择不同的评分。
为了进一步提升无障碍性，可以考虑：
-
title
属性：在label
上添加title
属性，鼠标悬停时会显示文字提示，这对所有用户都友好。 -
aria-label
或aria-labelledby
：如果你的星星图标本身没有明确的文字说明，可以在input
元素上添加aria-label="评分 5星"
这样的属性，或者将label
的文本内容通过aria-labelledby
关联起来，为屏幕阅读器提供更清晰的语义。 -
键盘焦点样式：确保当用户通过Tab键聚焦到评分控件时，有一个清晰的视觉焦点指示，比如给
.rating-container:focus-within
或label:focus
添加outline
样式。
表单提交（Form Submission）： 这是自定义控件的终极目的之一：数据能被正确地提交到后端。由于我们使用了原生的
input[type='radio']，所以表单提交完全不是问题。
-
name
属性：确保所有代表评分的input[type='radio']
都拥有相同的name
属性（例如name="rating"
）。这是radio
按钮组的关键，它告诉浏览器这些按钮是互斥的。 -
value
属性：每个input[type='radio']
都必须有一个唯一的value
属性，代表其对应的评分值（例如value="1"
、value="2"
等）。当用户提交表单时，只有被选中的那个radio
按钮的name
和value
对会被发送到服务器。例如，如果用户选择了4星，后端接收到的数据可能是rating=4
。
这意味着，你不需要任何JavaScript来处理评分值的获取和提交，完全依赖于HTML和浏览器的原生行为。这大大简化了开发流程，也减少了潜在的错误。在实际项目中，我经常会先用纯CSS和HTML把基础功能搭好，确认其在无障碍性和表单提交上没问题，然后才考虑是否需要JavaScript来添加一些高级的交互或动画效果。这种“渐进增强”的思路，让你的控件即使在JavaScript被禁用的情况下也能正常工作，非常健壮。
