gpt4 book ai didi

html - 简单的评级星 CSS

转载 作者:行者123 更新时间:2023-11-28 15:17:57 27 4
gpt4 key购买 nike

我正在尝试使用 HTML 和 CSS 构建一个简单的评级系统。这是一个非常简单的评分栏,由 5 颗星组成。

fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}

.rating {
border: none;
float: left;
}

.rating>input {
display: none;
}

.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}

.rating>.half:before {
content: "\f089";
position: absolute;
}

.rating>label {
color: #ddd;
float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
color: #FFD700;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
color: #FFED85;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<fieldset class="rating">

<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="star5" title="Excellent"></label>

<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>

<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>

<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>

<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>

<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>

<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>

<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>

<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>

<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>

</fieldset>

问题是我只能选择最高 4.5 星的星,这是第 5 星的一半,我想要的是选择完整的 5 星。我在下面包含了评级栏的图像。非常感谢您的帮助。

Rating bar

最佳答案

只是一个打字错误 - 需要将 star5 更改为 5star:

fieldset,
label {
margin: 0;
padding: 0;
margin-bottom: 20px;
}

.rating {
border: none;
float: left;
}

.rating>input {
display: none;
}

.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}

.rating>.half:before {
content: "\f089";
position: absolute;
}

.rating>label {
color: #ddd;
float: right;
}

.rating>input:checked~label,

/* show gold star when clicked */

.rating:not(:checked)>label:hover,

/* hover current star */

.rating:not(:checked)>label:hover~label {
color: #FFD700;
}


/* hover previous stars in list */

.rating>input:checked+label:hover,

/* hover current star when changing rating */

.rating>input:checked~label:hover,
.rating>label:hover~input:checked~label,

/* lighten current selection */

.rating>input:checked~label:hover~label {
color: #FFED85;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<fieldset class="rating">

<input type="radio" id="5star" name="rating" value="5" />
<label class="full" for="5star" title="Excellent"></label>

<input type="radio" id="4halfstar" name="rating" value="4.5" />
<label class="half" for="4halfstar" title="Good"></label>

<input type="radio" id="4star" name="rating" value="4" />
<label class="full" for="4star" title="Pretty good"></label>

<input type="radio" id="3halfstar" name="rating" value="3.5" />
<label class="half" for="3halfstar" title="Nice"></label>

<input type="radio" id="3star" name="rating" value="3" />
<label class="full" for="3star" title="Ok"></label>

<input type="radio" id="2halfstar" name="rating" value="2.5" />
<label class="half" for="2halfstar" title="Kinda bad"></label>

<input type="radio" id="2star" name="rating" value="2" />
<label class="full" for="2star" title="Bad"></label>

<input type="radio" id="1halfstar" name="rating" value="1.5" />
<label class="half" for="1halfstar" title="Meh"></label>

<input type="radio" id="1star" name="rating" value="1" />
<label class="full" for="1star" title="Umm"></label>

<input type="radio" id="halfstar" name="rating" value="0.5" />
<label class="half" for="halfstar" title="Worst"></label>

</fieldset>

关于html - 简单的评级星 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46741025/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com