首页 > 前端 CSS > 【小技巧】纯 CSS3 实现星星评分效果

【小技巧】纯 CSS3 实现星星评分效果

评分功能在如今已经十分普及，几乎处处都能见到评分功能，比如点完外卖可以评分、看完电影可以评分、坐出租车也可以评分，对别人进行评分已经深入生活。关于评分，见到的最多的就是星星评分，可以有 1~5 的评分范围。此类功能 JS 插件居多，但今天我们用 CSS3 来实现这个效果。

原理分析

首先我们先把 5 个星星拆分成 5 个 input，每个 input 对应不同的评分。这样我们可以通过选择不同的 input 来提交不同的评分。

然后就是样式的编写，因为 input 不能直接更改样式，这里我们用 label 来实现联动。

最后就是关于样式的实现，这里我们需要了解两个东西 :checked 和 ~ 这两个CSS选择器。

:checked 只适用于 type 为 checkbox 和 radio 的 input，可以通过这选择器匹配已经被勾选的 input。

~ 是一个比较少用的选择器，比如 element1~element2 它匹配的是 element1 元素的后面所有的 element2 元素。其中有一个限制，就是这两个元素的父元素要一致。

实现过程

前面了解了基本原理，现在我们开始实现，很简单，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS实现星星评分 Star Rating</title>
    <style>
        .star_rating {

        }
        .star_rating input {
            width: 0;
            height: 0;
            margin: 0;
            visibility: hidden;
        }
        .star_rating label {
            display: block;
            float: left;
            width: 1em;
            height: 1em;
            line-height: 1em;
            text-align: center;
            font-size: 124px;
            font-weight: bold;
            color: red;
        }
        .star_rating label:before {
            content: "★";
        }
        .star_rating input:checked~input~label:before {
            content: "☆";
        }
    </style>
</head>
<body>
    <div class="star_rating">
        <input type="radio" value="1" name="star_rating" id="star_rating_1">
        <label for="star_rating_1"></label>
        <input type="radio" value="2" name="star_rating" id="star_rating_2">
        <label for="star_rating_2"></label>
        <input type="radio" value="3" name="star_rating" id="star_rating_3" checked="checked">
        <label for="star_rating_3"></label>
        <input type="radio" value="4" name="star_rating" id="star_rating_4">
        <label for="star_rating_4"></label>
        <input type="radio" value="5" name="star_rating" id="star_rating_5">
        <label for="star_rating_5"></label>
    </div>
</body>
</html>

效果