我正在寻找一个星级评分系统。我需要一些非常简单且有效的东西！这是我尝试过的：
//reset, center n shiz (don't mind this stuff)
*, ::after, ::before{
height: 100%;
padding:0;
margin:0;
box-sizing: border-box;
text-align: center;
vertical-align: middle;
}
body{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
&::before{
height: 100%;
content:'';
width:0;
background:red;
vertical-align: middle;
display:inline-block;
}
}
.star-rating{
font-size:0;
white-space:nowrap;
display:inline-block;
width:250px;
height:50px;
overflow:hidden;
position:relative;
background:
url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
i{
opacity: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
z-index: 1;
background:
url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
background-size: contain;
}
input{
-moz-appearance:none;
-webkit-appearance:none;
opacity: 0;
display:inline-block;
width: 20%;
height: 100%;
margin:0;
padding:0;
z-index: 2;
position: relative;
&:hover + i,
&:checked + i{
opacity:1;
}
}
i ~ i{
width: 40%;
}
i ~ i ~ i{
width: 60%;
}
i ~ i ~ i ~ i{
width: 80%;
}
i ~ i ~ i ~ i ~ i{
width: 100%;
}
}
//JUST COSMETIC STUFF FROM HERE ON. THESE AREN'T THE DROIDS YOU ARE LOOKING FOR: MOVE ALONG.
//just styling for the number
.choice{
position: fixed;
top: 0;
left:0;
right:0;
text-align: center;
padding: 20px;
display:block;
}
<span class="star-rating">
<input type="radio" name="rating" value="1"><i></i>
<input type="radio" name="rating" value="2"><i></i>
<input type="radio" name="rating" value="3"><i></i>
<input type="radio" name="rating" value="4"><i></i>
<input type="radio" name="rating" value="5"><i></i>
</span>
<strong class="choice">Choose a rating</strong>{{1}}＆＃13;
那是THIS SITE。如果我在某处犯了错误，请在下面的评论中更正。我搜索了更多的东西，但遗憾的是，不起作用：/
答案 0 :(得分：4)
你可以调整你的标记/ CSS，并通过使用下面的方法（用你的一些代码更新）实现这一点，我写了一些时间。请注意，这也会将您的输入包含在更加语义fieldset结构中，以及在当前悬停/当前选定项目方面更好的UI。如果是表格的一部分，相关的价值也将被正确提交。
$('.rating input').change(
function() {
$('#choice').text(this.value + ' stars');
}
).rating {
float: left;
border: none;
}
.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: 200%;
line-height: 1.2;
color: #ddd;
}
.rating:not(:checked) > label:before {
content: '★ ';
}
.rating > input:checked ~ label {
color: #f70;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: gold;
}
.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: #ea0;
}
.rating > label:active {
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" />
<label for="star5">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1">1 star</label>
</fieldset>
<div id="choice"></div>
答案 1 :(得分：0)
我建议使用我建立的基于CSS的评分系统。很容易理解和修改
HTML：
<formset id = "rating" class = "rating">
<input type = "radio" id = "r0" name = "rating" checked = true style = "display:none;"> <label for = "r0" style = "display:none;"></label>
<input type = "radio" id = "r1" name = "rating"> <label for = "r1"></label>
<input type = "radio" id = "r2" name = "rating"> <label for = "r2"></label>
<input type = "radio" id = "r3" name = "rating"> <label for = "r3"></label>
<input type = "radio" id = "r4" name = "rating"> <label for = "r4"></label>
<input type = "radio" id = "r5" name = "rating"> <label for = "r5"></label>
</formset>
CSS：
fieldset, label { margin: 0; padding: 0; }
.rating
{
color: yellow;
}
formset > label, formset > input
{
float: left;
}
formset > label::after
{
content: '★ ';
font-size: 50px;
color: lightpink;
}
formset:hover > input:not(:checked) ~ label::after,
formset:not(:hover) > label::after,
formset:hover > input:checked ~ label::after
{
color: orange;
}
formset:hover > input:checked ~ label:hover ~ label::after,
formset:hover > label:hover ~ label::after,
formset:not(:hover) > input:checked~label~label::after
{
color: grey;
}
formset:hover > input:checked ~ label~ label::after,
formset:hover > label:hover ~ label::after
{
color: lightpink;
}
formset:hover > label:hover~ input:checked~label~label::after
{
color: grey;
}