これらは通常の5つの星である必要があります。それらの上にマウスを移動すると、最初から指定した星まですべての星が強調表示され、選択（クリック）するとこの状態が維持されます。 また、もちろん、フォームを送信するときに、指定された評価の値を確実に転送する必要があります。
この決定は最終プロジェクトではなく、テンプレートに対して行われました。 したがって、さらにカスタマイズするには、星をできるだけ柔軟にする必要がありました。 つまり、色が変わり、星のサイズができるだけ簡単になります。 イメージスプライトの使用はこの構成に適合しなかったため、フォントアイコンを使用することにしました。 選択肢はFont Awesomeサービスにありました。 fa-star-oという名前のアスタリスクがあります-デフォルトのアスタリスクとfa-star-アクティブな星（ホバリングと選択時）。
それから、理想的にはjavascriptを使用せずに、最小限のリソースでこのようなタスクを実装する方法について考えることにしました。 その結果、すべてが判明し、私にとっては、このようなソリューションは同様のタスクに最適です。
さらに読むのが面倒なので 、すぐに結果を見ることができます-codepen 。
HTMLマークアップ
一般的な考え方は、フォームを介したデータの転送を維持するために、通常のラジオボタンで評価を表示することです。 次に、CSSを使用してラジオボタンを非表示にし、for属性を持つラジオボタンを参照する隣接ラベルをクリックして選択します。 ラベル自体は、Font Awesomeサービスのアイコンの形式で表示されます。
要約すると、HTMLマークアップは次のとおりです。
<div class="star-rating"> <div class="star-rating__wrap"> <input class="star-rating__input" id="star-rating-5" type="radio" name="rating" value="5"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-4" type="radio" name="rating" value="4"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-3" type="radio" name="rating" value="3"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-2" type="radio" name="rating" value="2"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label> <input class="star-rating__input" id="star-rating-1" type="radio" name="rating" value="1"> <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label> </div> </div>
もちろん、最初にFont Awesomeフォントを含めることを忘れないでください。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
入力要素とラベル要素の順序を維持し、ネストされた要素を内部に配置しないことが非常に重要です。
5から1の逆の順序でラジオボタンを表示することも非常に重要です。
CSSスタイル
最初に行うことは、ラジオボタンを非表示にすることです。 その結果、クリックすると、目的のラジオボックスが強調表示されているアスタリスクのみが表示されます。
.star-rating__input{ display: none; }
2番目-アイコンをホバーすると、アクティブなアイコンに変わり、現在のアイコンだけでなく、その前にあるすべてのアイコンも変わるはずです！
.star-rating__ico:hover:before, .star-rating__ico:hover ~ .b-star-rating__ico:before, { content: "\f005"; }
内容： "\ f005"; Font Awesomeフォントのアクティブな星評価アイコンのコードです。 このフォントのアイコンは、疑似要素の前に::で挿入されます
第三に、アイコンをクリックすると、ガイダンスの状態が保持されます。つまり、現在の星と隣接する星がアクティブになります。
同じルールにもう1つのセレクターを追加します。
.star-rating__input:checked ~ .star-rating__ico:before
その結果、主な作業を行う主なスタイルは次のとおりです。
.star-rating__input{ display: none; } .star-rating__ico:hover:before, .star-rating__ico:hover ~ .star-rating__ico:before, .star-rating__input:checked ~ .star-rating__ico:before { content: "\f005"; }
次に、姉妹セレクターがテキストの方向の隣人を選択するため、星を反対方向に回す必要があります。 デフォルトでは、左から右に向かっていますが、逆が必要です。
この問題を解決するには、次の2つの方法があります。方向を指定して星評価要素のテキストの方向を変更します。rtl、または要素を右側にフロートさせます。 私は2番目のオプションを好みます。 さらに、.star-rating内の要素をフローティングにすることで、ホバーが消えるアスタリスク間のインデントを削除します
一般的には、すべてがすでに普通です。 再びcodepenの結果へのリンク。
その結果、HTML + CSSのみで記述されたフォントアイコンを備えた本格的な星評価があり、星のサイズと色を簡単に変更できます。