如何解决半星评级,带有空星和单选按钮
是否可以使用单选按钮标签和字体真棒图标来实现这一点? 我需要的半星级风格
我设法做的最多的是,使用两个字体真棒图标作为单选按钮标签,但我不希望未选择的区域是灰色的,而是像上图一样带有边框的空星: 我得到的半星评价
这是我的代码:
.rate{
display: inline-block;
border: 0;
color: #b0afaf;
}
.rate > input{
display: none;
}
.rate > label {
float: right;
}
.rate > label:before {
display: inline-block;
font-size: 1.1rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
font-family: FontAwesome;
content: "\f005 ";
}
.rate .half:before {
content: "\f089 ";
position: absolute;
padding-right: 0;
}
input:checked ~ label,label:hover,label:hover ~ label {
color: #dbc00b;
}
input:checked + label:hover,input:checked ~ label:hover,input:checked ~ label:hover ~ label,label:hover ~ input:checked ~ label {
color: #f2ec35;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rate">
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5" title="Awesome"></label>
<input type="radio" id="star4.5" name="rating" value="4.5" />
<label for="star4.5" class="half"></label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4"></label>
<input type="radio" id="star3.5" name="rating" value="3.5" />
<label for="star3.5" class="half"></label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3"></label>
<input type="radio" id="star2.5" name="rating" value="2.5" />
<label for="star2.5" class="half"></label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2"></label>
<input type="radio" id="star1.5" name="rating" value="1.5" />
<label for="star1.5" class="half"></label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1"></label>
<input type="radio" id="star0.5" name="rating" value="0.5" />
<label for="star0.5" class="half"></label>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。