使用 Unicode 星号进行星级评定

您可能不知道这一点，但在过去的一周里，在 Dev 上发生了一场暗战，好吧，情况并没有那么严重，但是有几个人发布了关于如何使用 html 和 css（如果需要，还有 JS）制作星级评定组件的帖子，唯一的规则是组件必须是可访问的。

目前已参与的文章有；

使用单一输入进行星级评定

Mads Stoumann ・ 21年7月3日

#html #css #javascript #webdev

无需 JS 即可实现可扩展的“星级评定”（并且无需 SVG 或星级图像）

Temani Afif ・ 21年7月4日

#css #html #webdev #初学者

如果您想参与，请随意发表类似的帖子，我相信我们会很高兴看到您的作品并提供一些反馈。

好了，我们继续我的帖子吧。我之前提到的三个版本都很棒，但它们都用 CSS 绘制了各自的星星，这没问题，不过我们已经有 unicode 格式的星星了！我们已经有一颗实心的星星（★），我想这就是我们所需要的了。

为什么可访问性很重要？

当你为网络或任何平台构建某种东西时，你的主要目标是解决一个问题，这个问题可能只是将信息传递到大众手中，也可能是更大的问题，比如管理餐厅预订。由于目标是解决问题，因此为那些可能无法以“正常”方式访问你平台的用户制造一大堆新问题并非明智之举。正因如此，WCAG（Web 内容可访问性指南）应运而生，旨在让尽可能多的人都能使用网络。

代码

我的 HTML 与 @inhuofficial 的并无太大差异，因为说实话，他们的方法跟我在现实生活中做星级评定的方法差不多。不过，我们确实在 CSS 方面有所不同，因为正如我之前提到的，大家都用 SVG 和渐变来制作星星，但我们采用的是不同的方法。我经常使用 w3 来制作，而星级评定则参考本教程。

'star' html

我的每一颗星星都由 5 行 html 代码组成，输入框保存了选中星星的“状态”，标签则构成了一个可点击区域，我们可以设置其样式，使其看起来像星星。你会注意到，标签和输入框是通过输入框的 ID 连接的。

该类还具有跨度，hide-visually该类允许屏幕阅读器读取内容，但将其隐藏起来，以便不使用屏幕阅读器的人看不到它。

<input name="rating" value="1" type="radio" id="rating1">
<label for="rating1">
  <span class="hide-visually">1 Star</span>
  <span aria-hidden="true" class="star">★</span>
</label>

'star' CSS

hide-visually 类用于使某些内容对于视力正常的用户不可见，但仍能被屏幕阅读器读取。

实际的星星直接写入 HTML 文本中，但我们可以使用 CSS 来改变它们，如果我们想在星星“活跃”时改变符号，我们可以使用::before伪类。

.star-rating>label {
  -webkit-text-stroke: 2px black;
}

.star-rating input:checked~label>span.star,
.star-rating>label:hover~input~label>span.star{
  color: #fff;
}

.star-rating span.star,
.star-rating:hover>input+label>span.star,
.star-rating>input:checked+label>span.star,
.star-rating>input~label:hover>span.star{
  color: gold;
}

.star-rating>input~label:hover>span.star{
  color: orange;
}

整合

每组星星都包裹在一个字段集中，这样做是为了更容易地监听变化，您可以对每个字段集监听一次变化，而不是对每个输入监听一次变化。

我还添加了一个 0 星的输入框和标签，但它们被隐藏了。如果我们愿意，可以显示 0 星，并为其添加一个清晰的图标，以暗示按下它会清除所有星星。

还有一些其他风格可以使所有星星布局美观，但我认为这些风格不是那么有趣，如果您想制作自己的版本，可以更改它们。

结果

使用 unicode 的乐趣在于我们可以用任何支持的形状来替换星号。

签名

就是这样，如果有任何问题或反馈，请随意留在下面的评论中，并务必查看“战争”中的其他帖子。

对于任何初学者来说，只要看看如何做事，看看几个不同的人以自己的方式解决同一个问题，每个人都解释为什么他们这样做，这会有帮助吗？

感谢阅读🦄❤️🦄🧙‍♂️🧙‍♂️🧠🦄🧙‍♂️🧠🦄