在显示星级评分系统中使用css会产生PHP HTML

Question

<div class=" rating  ">
                <input  type="radio" id="star2" name="rating" value="2" /><label for="star2" disabled title="Sucks big tim">2 stars</label>
            </div>

我已经使用CSS在我的应用程序中成功完成了星级评分系统

星级评定由未选中的浅灰色和选中的蓝色组成。当用户选择并点击提交时，他们正常工作并且不会失去他们的位置。

但是，我想要显示浅灰色或蓝色并且无法点击的星星。我该怎么做呢

 .rating {
          float:left;
        }

        /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
          follow these rules. Every browser that supports :checked also supports :not(), so
          it doesn’t make the test unnecessarily selective */
        .rating:not(:checked) > input {
            position:absolute;
            top:-9999px;
            clip:rect(0,0,0,0);
        }

        .rating:not(:checked) > label {
            float:right;
            width:1em;
            /* padding:0 .1em; */
            overflow:hidden;
            white-space:nowrap;
            cursor:pointer;
            font-size:300%;
            /* line-height:1.2; */
            color:#ddd;
        }

        .rating:not(:checked) > label:before {
            content: '★ ';
        }

        .rating > input:checked ~ label {
            color: dodgerblue;
            
        }

        .rating:not(:checked) > label:hover,
        .rating:not(:checked) > label:hover ~ label {
            color: dodgerblue;
            
        }

        .rating > input:checked + label:hover,
        .rating > input:checked + label:hover ~ label,
        .rating > input:checked ~ label:hover,
        .rating > input:checked ~ label:hover ~ label,
        .rating > label:hover ~ input:checked ~ label {
            color: dodgerblue;
            
        }

        .rating > label:active {
            position:relative;
            top:2px;
            left:2px;
        }
        
      

Answer 1

.rating {
  float:left;
}
.rating:not(:checked) > input {
  position:absolute;
  top:-9999px;
  clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
  float:right;
  width:1em;
  /* padding:0 .1em; */
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:300%;
  /* line-height:1.2; */
  color:#ddd;
}

.rating:not(:checked) > label:before {
  content: '★ ';
  color: #e4e0e0;
}
.rating:not(:checked) > label:after {
  position: absolute;
  content: '★';
  color: dodgerblue;
  left: 5%;
}

/* .rating > input:checked ~ label {
  color: dodgerblue;

} */

.rating:not(:checked) > label,
.rating:not(:checked) > label ~ label {
  color: dodgerblue;

}

/* .rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: dodgerblue;

} */

/* .rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
  color: dodgerblue;

} */

.rating > label:active {
  position:relative;
  top:2px;
  left:2px;
}

<div class=" rating  ">
 <input  type="radio" id="star2" name="rating" value="2" />
  <label for="star2" disabled title="Sucks big tim">2 stars</label>
 </div>

海这一个