CSS 将CSS星级评分集成到HTML表单中

在本文中，我们将介绍如何将CSS星级评分集成到HTML表单中。星级评分是一种常见的用户评价方式，可用于收集用户对产品、服务或内容的评分和反馈。通过将星级评分与HTML表单结合起来，我们可以轻松地收集用户对不同项目的评分。

阅读更多：CSS 教程

使用HTML表单创建星级评分

首先，我们需要创建一个HTML表单，其中包含星级评分元素。在此示例中，我们将使用一个简单的5星级评分系统。以下是一个基本的HTML表单示例：

<form action="" method="post">
  <label for="rating">评分：</label>
  <div class="rating">
    <input type="radio" id="star5" name="rating" value="5">
    <label for="star5"></label>
    <input type="radio" id="star4" name="rating" value="4">
    <label for="star4"></label>
    <input type="radio" id="star3" name="rating" value="3">
    <label for="star3"></label>
    <input type="radio" id="star2" name="rating" value="2">
    <label for="star2"></label>
    <input type="radio" id="star1" name="rating" value="1">
    <label for="star1"></label>
  </div>
  <input type="submit" value="提交">
</form>

在上面的示例中，我们在一个<div>元素中创建了一组单选按钮作为星级评分。每个单选按钮都有一个关联的标签，该标签通过for属性与对应的单选按钮相对应。

CSS样式化星级评分

接下来，我们需要使用CSS来样式化星级评分。我们可以使用伪元素和伪类来创建星星的效果。以下是一个基本的CSS样式示例：

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}

.rating > input {
  display: none;
}

.rating > label:before {
  content: '\2605';
  font-size: 24px;
  color: #ccc;
}

.rating > input:checked ~ label:before,
.rating > label:hover:before {
  color: gold;
}

在上面的示例中，我们将<div>元素的text-align属性设置为center，以将星星水平居中对齐。我们还使用了unicode-bidi: bidi-override;和direction: rtl;属性将星星从右向左排列，以使星星从左边开始。通过display: none;属性隐藏了单选按钮，而通过设置content属性为星星字符\2605，并通过font-size属性定义了星星的大小和色调。最后，我们通过使用伪类checked和hover来改变星星的颜色。

示例

下面是一个集成了CSS星级评分的完整HTML表单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>星级评分示例</title>
  <style>
    .rating {
      unicode-bidi: bidi-override;
      direction: rtl;
      text-align: center;
    }

    .rating > input {
      display: none;
    }

    .rating > label:before {
      content: '\2605';
      font-size: 24px;
      color: #ccc;
    }

    .rating > input:checked ~ label:before,
    .rating > label:hover:before {
      color: gold;
    }
  </style>
</head>
<body>
  <form action="" method="post">
    <label for="rating">评分：</label>
    <div class="rating">
      <input type="radio" id="star5" name="rating" value="5">
      <label for="star5"></label>
      <input type="radio" id="star4" name="rating" value="4">
      <label for="star4"></label>
      <input type="radio" id="star3" name="rating" value="3">
      <label for="star3"></label>
      <input type="radio" id="star2" name="rating" value="2">
      <label for="star2"></label>
      <input type="radio" id="star1" name="rating" value="1">
      <label for="star1"></label>
    </div>
    <input type="submit" value="提交">
  </form>
</body>
</html>

你可以将上述代码复制并粘贴到一个HTML文件中，然后在浏览器中打开该文件，即可看到带有星级评分的HTML表单。