将 CSS 星级集成到 HTML 表单中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8118266/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Integrating CSS star rating into an HTML form
提问by Amar H-V
I've seen a tutorial online - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System- for making a CSS star rating system.
我在网上看过一个教程 - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System- 用于制作 CSS 星级评分系统。
On the page they have this code:
在页面上，他们有以下代码：
<ul class="rating">
<li><a href="#" title="1 Star">1</a></li>
<li><a href="#" title="2 Stars">2</a></li>
<li><a href="#" title="3 Stars">3</a></li>
<li><a href="#" title="4 Stars">4</a></li>
<li><a href="#" title="5 Stars">5</a></li>
</ul>
From what I can tell, this is just a list. How would I integrate it into my form, so that the information from the star rating can be submitted to a database. My current code for the form is below:
据我所知，这只是一个清单。我如何将它集成到我的表单中，以便可以将星级信息提交到数据库中。我当前的表单代码如下：
<p>Quality</p>
<input type="radio" name="ratingquality" value="1">
<input type="radio" name="ratingquality" value="2">
<input type="radio" name="ratingquality" value="3">
<input type="radio" name="ratingquality" value="4">
<input type="radio" name="ratingquality" value="5">
回答by Gargiya
This is very easy to use, just copy-paste the code. You can use your own star image in background.
这个很容易使用，只需复制粘贴代码即可。您可以在背景中使用自己的星形图像。
I have created a variable var userRating. you can use this variable to get value from stars.
我创建了一个变量var userRating。您可以使用此变量从星星中获取价值。
Enjoy!! :)
享受！！:)
$(document).ready(function(){
// Check Radio-box
$(".rating input:radio").attr("checked", false);
$('.rating input').click(function () {
$(".rating span").removeClass('checked');
$(this).parent().addClass('checked');
});
$('input:radio').change(
function(){
var userRating = this.value;
alert(userRating);
});
});.rating {
float:left;
width:300px;
}
.rating span { float:right; position:relative; }
.rating span input {
position:absolute;
top:0px;
left:0px;
opacity:0;
}
.rating span label {
display:inline-block;
width:30px;
height:30px;
text-align:center;
color:#FFF;
background:#ccc;
font-size:30px;
margin-right:2px;
line-height:30px;
border-radius:50%;
-webkit-border-radius:50%;
}
.rating span:hover ~ span label,
.rating span:hover label,
.rating span.checked label,
.rating span.checked ~ span label {
background:#F90;
color:#FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rating">
<span><input type="radio" name="rating" id="str5" value="5"><label for="str5"></label></span>
<span><input type="radio" name="rating" id="str4" value="4"><label for="str4"></label></span>
<span><input type="radio" name="rating" id="str3" value="3"><label for="str3"></label></span>
<span><input type="radio" name="rating" id="str2" value="2"><label for="str2"></label></span>
<span><input type="radio" name="rating" id="str1" value="1"><label for="str1"></label></span>
</div>回答by Shadi Abu Hilal
Here is how to integrate CSS star rating into an HTML form without using javascript (only html and css):
以下是如何在不使用 javascript（仅 html 和 css）的情况下将 CSS 星级集成到 HTML 表单中：
CSS:
CSS：
.txt-center {
text-align: center;
}
.hide {
display: none;
}
.clear {
float: none;
clear: both;
}
.rating {
width: 90px;
unicode-bidi: bidi-override;
direction: rtl;
text-align: center;
position: relative;
}
.rating > label {
float: right;
display: inline;
padding: 0;
margin: 0;
position: relative;
width: 1.1em;
cursor: pointer;
color: #000;
}
.rating > label:hover,
.rating > label:hover ~ label,
.rating > input.radio-btn:checked ~ label {
color: transparent;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating > input.radio-btn:checked ~ label:before,
.rating > input.radio-btn:checked ~ label:before {
content: "05";
position: absolute;
left: 0;
color: #FFD700;
}
HTML:
HTML：
<div class="txt-center">
<form>
<div class="rating">
<input id="star5" name="star" type="radio" value="5" class="radio-btn hide" />
<label for="star5">☆</label>
<input id="star4" name="star" type="radio" value="4" class="radio-btn hide" />
<label for="star4">☆</label>
<input id="star3" name="star" type="radio" value="3" class="radio-btn hide" />
<label for="star3">☆</label>
<input id="star2" name="star" type="radio" value="2" class="radio-btn hide" />
<label for="star2">☆</label>
<input id="star1" name="star" type="radio" value="1" class="radio-btn hide" />
<label for="star1">☆</label>
<div class="clear"></div>
</div>
</form>
</div>
Please check the demo
请检查演示
回答by Dan Jones
How about this? I needed the exact same thing, I had to create one from scratch. It's PURE CSS, and works in IE9+ Feel-free to improve upon it.
这个怎么样？我需要完全相同的东西，我必须从头开始创建一个。它是纯 CSS，可在 IE9+ 中使用，请随时对其进行改进。
Demo: http://www.d-k-j.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/
演示：http: //www.dkj.com/Articles/Web_Development/Pure_CSS_5_Star_Rating_System_with_Radios/
<ul class="form">
<li class="rating">
<input type="radio" name="rating" value="0" checked /><span class="hide"></span>
<input type="radio" name="rating" value="1" /><span></span>
<input type="radio" name="rating" value="2" /><span></span>
<input type="radio" name="rating" value="3" /><span></span>
<input type="radio" name="rating" value="4" /><span></span>
<input type="radio" name="rating" value="5" /><span></span>
</li>
</ul>
CSS:
CSS：
.form {
margin:0;
}
.form li {
list-style:none;
}
.hide {
display:none;
}
.rating input[type="radio"] {
position:absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
cursor:pointer;
width:17px;
}
.rating span {
width:24px;
height:16px;
line-height:16px;
padding:1px 22px 1px 0; /* 1px FireFox fix */
background:url(stars.png) no-repeat -22px 0;
}
.rating input[type="radio"]:checked + span {
background-position:-22px 0;
}
.rating input[type="radio"]:checked + span ~ span {
background-position:0 0;
}
回答by Michel
CSS:
CSS：
.rate-container > i {
float: right;
}
.rate-container > i:HOVER,
.rate-container > i:HOVER ~ i {
color: gold;
}
HTML:
HTML：
<div class="rate-container">
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
<i class="fa fa-star "></i>
</div>
回答by jasonmerino
I'm going to say right off the bat that you will not be able to achieve the look they have with radio buttons with strictly CSS.
我马上要说的是，您将无法通过严格使用 CSS 的单选按钮实现它们的外观。
You could, however, stick to the list style in the example you posted and replace the anchorswith clickable spansthat would trigger a javascript event that would in turn save that rating to your database via ajax.
但是，您可以坚持您发布的示例中的列表样式，并将 替换为anchors可spans触发的 javascript 事件，该事件又会通过 ajax 将该评级保存到您的数据库中。
If you went that route you would probably also want to save a cookie to the users machine so that they could not submit over and over again to your database. That would prevent them from submitting more than once at least until they deleted their cookies.
如果你走那条路，你可能还想在用户机器上保存一个 cookie，这样他们就不能一遍又一遍地提交到你的数据库。这将阻止他们至少在删除 cookie 之前提交多次。
But of course there are many ways to address this problem. This is just one of them. Hope that helps.
但是当然有很多方法可以解决这个问题。这只是其中之一。希望有帮助。
回答by Nitesh
Here is the solution.
这是解决方案。
The HTML:
HTML：
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>
The CSS:
CSS：
.rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "05";
position: absolute;
}
Hope this helps.
希望这可以帮助。
