转载：三种方式使用纯 CSS 实现星级评分

本文链接：https://blog.youkuaiyun.com/smallqiang/article/details/144980722

效果：

使用：第一种方式 :has()选择器 + input:checked

代码：

<style>
/* 参考文章：https://blog.youkuaiyun.com/kfashfasf/article/details/136737765 */
html,body{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:40px;
}
div{
  width:300px;
  display:flex;
  /* 从右往左排列 */
/*   flex-direction:row-reverse; */
  justify-content:space-around;
}
input[type="radio"]{
  display:none;
}
/* input:checked + label 表示 选择紧挨着已选中 input 框的后面一个 label */
input:checked + label{
  color:gold;
}
/* 点击星级时，点亮当前选择的之前所有的星级 */
div:has(input:checked) label:not(input:checked ~ label){
  color:gold;
}

label{
  display:inline-block;
  width:50px;height:50px;
  border-radius:50%;
  color:#ccc;
  transition:all ease 0.2s;
}

/* 当鼠标移入星星时，高亮当前星星，并且该位置之后的星星取消高亮； */
label:hover{
  cursor:pointer;
  color:gold;
  & ~ label{
    color:#ccc!important;
  }
}

/* 点亮当前hover之前的所有星级 */
div:has(label:hover) label:not(:hover,:hover ~ *){
  color:gold;
}
</style>
<meta charset="utf-8">
<script>
  function submit_radio_value(form){
  	var selectedValue = document.querySelector('input[name="radio"]:checked').value;
  	alert(selectedValue); 
  }	
</script>
<form id="FORM1" name="FORM1">
<div>
  <input type="radio" name="radio" id="radio1" value="1">
  <label for="radio1">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio2" value="2" checked>
  <label for="radio2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio3" value="3">
  <label for="radio3">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio4" value="4">
  <label for="radio4">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
  <input type="radio" name="radio" id="radio5" value="5">
  <label for="radio5">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style=""><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
  </label>
</div>
<br><br>
<input type='button' name='button1' value=' 查看提交radio的值 ' onClick="submit_radio_value(this.form)">
</form>