将CSS星级评分整合到HTML表格中

Question

我在线看过一个教程 - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - 用于制作CSS星级评分系统。

在网页上，他们有这样的代码：

<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> 

从我可以告诉，这只是一个列表。我将如何将它整合到我的表格中，以便星级评定的信息可以提交给数据库。我目前的形式，代码如下：

<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"> 

Answer 1

这是非常容易使用，只需复制粘贴代码。您可以在背景中使用自己的星形图像。

我创建了一个变量var userRating。你可以使用这个变量来从星星获得价值。

享受！:)

CSS

.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; 
} 

HTML

<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> 

的Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(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); 
    }); 
}); 
</script> 

Answer 2

我会说马上蝙蝠，你将无法实现他们与单选按钮的外观与严格的CSS。

但是，您可以坚持使用您发布示例中的列表样式，并将anchors替换为可点击spans，这将触发一个JavaScript事件，该事件会通过ajax将该评级保存到数据库。

如果你走了这条路线，你可能还想将一个cookie保存到用户机器，以便它们不能一次又一次地提交给你的数据库。这会阻止他们至少提交一次，直到他们删除了他们的cookies。

但当然有很多方法可以解决这个问题。这只是其中之一。希望有所帮助。

Answer 3

这里是solution。

的HTML：

<div class="rating"> 
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span> 
</div> 

的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: "\2605"; 
    position: absolute; 
} 

希望这有助于。

Source

Answer 4

这个怎么样？我需要完全相同的东西，我必须从头开始创建一个。这是纯粹的CSS，并在IE9 +的工作无忧无虑，以改善它。

演示：http://www.d-k-j.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：

.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; 
} 

Answer 5

CSS：

.rate-container > i { 
    float: right; 
} 

.rate-container > i:HOVER, 
.rate-container > i:HOVER ~ i { 
    color: gold; 
} 

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> 

Answer 6

这里是如何CSS星级集成到HTML窗体，而不使用JavaScript（仅适用于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: "\2605"; 
    position: absolute; 
    left: 0; 
    color: #FFD700; 
} 

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> 

请检查demo