星级评定表 - 电子邮件评级
Star Rating Form - Email Rating
我有一个具有星级评分系统的表格。用户投票 1 到 5 颗星。它在前端工作得很好,但是当它通过电子邮件发送时,它是这样的:
'Rating-input-1: on'
我真的希望它能给我他们得分的数字 (1 - 5) 而不仅仅是 'on'。有任何想法吗?我的 HTML 和 CSS 代码如下,如果您需要其他任何东西,请告诉我。
HTML:
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
</span>
CSS:
.rating {
overflow: hidden;
}
.rating-input {
position: absolute;
left: 0;
top: -50px;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
}
.rating-star,
.rating:hover .rating-star {
float: right;
display: block;
width: 30px;
height: 30px;
background: url(images/stars2-2.png) 0 -30px;
}
.rating-star:hover {
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
也许您可以尝试将 'value' 属性添加到每个输入中。像这样:
<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" value="1">
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" value="2">
我有一个具有星级评分系统的表格。用户投票 1 到 5 颗星。它在前端工作得很好,但是当它通过电子邮件发送时,它是这样的:
'Rating-input-1: on'
我真的希望它能给我他们得分的数字 (1 - 5) 而不仅仅是 'on'。有任何想法吗?我的 HTML 和 CSS 代码如下,如果您需要其他任何东西,请告诉我。
HTML:
<span class="rating">
<input type="radio" class="rating-input"
id="rating-input-1-1" name="rating-input-1">
<label for="rating-input-1-1" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input"
id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
</span>
CSS:
.rating {
overflow: hidden;
}
.rating-input {
position: absolute;
left: 0;
top: -50px;
}
.rating:hover .rating-star:hover,
.rating:hover .rating-star:hover ~ .rating-star,
.rating-input:checked ~ .rating-star {
background-position: 0 0;
}
.rating-star,
.rating:hover .rating-star {
float: right;
display: block;
width: 30px;
height: 30px;
background: url(images/stars2-2.png) 0 -30px;
}
.rating-star:hover {
-webkit-transition: -webkit-width 0.5s;
-moz-transition: -moz-width 0.5s;
-ms-transition: -ms-width 0.5s;
-o-transition: -o-width 0.5s;
transition: width 0.5s;
}
也许您可以尝试将 'value' 属性添加到每个输入中。像这样:
<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" value="1">
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" value="2">