CSSの星の評価をHTMLフォームに統合する

Question

CSSの星評価システムを作成するためのオンラインチュートリアル（http://www.htmldrive.net/items/show/402/CSS-Star-Rating-System）を見ました。ページで

彼らはこのコードを持っている：

<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に置き換えると、ジャバスクリプトイベントがトリガーされ、その結果、ajax経由でデータベースに格付けが保存されます。

もしあなたがそのルートを訪れたなら、ユーザーのマシンにクッキーを保存して、あなたのデータベースに何度も繰り返し提出することができないようにしたいでしょう。それは、彼らがクッキーを削除するまで少なくとも1回以上提出することを妨げるでしょう。

もちろん、この問題に対処する方法はたくさんあります。これはただの1つです。希望が役立ちます。

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

にはJavaScript（のみHTMLと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: "\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