Tích hợp xếp hạng sao CSS vào biểu mẫu HTML

Question

Tôi đã xem hướng dẫn trực tuyến - http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System - để tạo hệ thống xếp hạng sao CSS.

Trên trang họ có mã này:

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

Từ những gì tôi có thể nói, đây chỉ là một danh sách. Làm thế nào tôi sẽ tích hợp nó vào biểu mẫu của tôi, để thông tin từ xếp hạng sao có thể được gửi đến cơ sở dữ liệu. Mã hiện tại của tôi cho biểu mẫu bên dưới:

<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

này là rất dễ sử dụng, chỉ cần sao chép-dán mã. Bạn có thể sử dụng hình ảnh ngôi sao của chính bạn trong nền.

tôi đã tạo biến số var userRating. bạn có thể sử dụng biến này để lấy giá trị từ các ngôi sao.

Tận hưởng !!:)

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

Tôi sẽ nói ngay lập tức rằng bạn sẽ không thể đạt được giao diện họ có bằng nút radio với CSS đúng.

Tuy nhiên, bạn có thể dính vào kiểu danh sách trong ví dụ mà bạn đã đăng và thay thế anchors bằng số lần nhấp spans có thể kích hoạt sự kiện javascript để lưu xếp hạng đó vào cơ sở dữ liệu của bạn qua ajax.

Nếu bạn đã đi tuyến đường đó, bạn có thể cũng muốn lưu cookie vào máy người dùng để họ không thể gửi đi lặp lại cơ sở dữ liệu của bạn. Điều đó sẽ ngăn họ gửi nhiều hơn một lần ít nhất cho đến khi họ xóa cookie của họ.

Nhưng tất nhiên có nhiều cách để giải quyết vấn đề này. Đây chỉ là một trong số họ. Hy vọng rằng sẽ giúp.

Answer 3

Đây là 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; 
} 

Hope this helps.

Source

Answer 4

Làm thế nào về điều này? Tôi cần điều tương tự, tôi phải tạo một cái từ đầu. Đó là CSS PURE, và hoạt động trong IE9 + Cảm thấy tự do để cải thiện nó.

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

Dưới đây là làm thế nào để tích hợp giá CSS sao thành một hình thức HTML mà không sử dụng javascript (chỉ html và 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> 

Vui lòng kiểm tra demo