cssの星の評価

Question

私はこれらのラジオボタンをreactjsの星評価コンポーネントにしています。黄色で塗りつぶす星の上にマウスを置いたときに、その中の1つをクリックして星から色を出すととどまることなく、灰色が戻ってきます。

render(){ 
    return (
     <div className="star-rating"> 
     <input id="star-5" type="radio" name="rating" value="star-5"></input> 
     <label for="star-5" title="5 stars"> 
      <i className="active fa fa-star" aria-hidden="true"></i> 
     </label> 
     <input id="star-4" type="radio" name="rating" value="star-4"></input> 
     <label for="star-4" title="4 stars"> 
      <i className="active fa fa-star" aria-hidden="true"></i> 
     </label> 
     <input id="star-3" type="radio" name="rating" value="star-3"></input> 
     <label for="star-3" title="3 stars"> 
      <i className="active fa fa-star" aria-hidden="true"></i> 
     </label> 
     <input id="star-2" type="radio" name="rating" value="star-2"></input> 
     <label for="star-2" title="2 stars"> 
      <i className="active fa fa-star" aria-hidden="true"></i> 
     </label> 
     <input id="star-1" type="radio" name="rating" value="star-1"></input> 
     <label for="star-1" title="1 star"> 
      <i className="active fa fa-star" aria-hidden="true"></i> 
     </label> 
     </div> 
    ); 
} 

とCSS：

.star-rating { 
 
    direction: rtl; 
 
    display: inline-block; 
 
    padding: 20px 
 
} 
 

 
.star-rating input[type=radio] { 
 
    display: none 
 
} 
 

 
.star-rating label { 
 
    color: #bbb; 
 
    font-size: 50px; 
 
    padding: 0; 
 
    cursor: pointer; 
 
} 
 

 
.star-rating label:hover, 
 
.star-rating label:hover ~ label, 
 
.star-rating input[type=radio]:checked ~ label { 
 
    color: #f2b600 
 
}

すべてのヘルプここで

は、JSファイルのですか？

Answer 1

あなたが作業コードスニペットを共有できるJames Barnett

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); 
 

 
fieldset, label { margin: 0; padding: 0; } 
 
body{ margin: 20px; } 
 
h1 { font-size: 1.5em; margin: 10px; } 
 

 
/****** Style Star Rating Widget *****/ 
 

 
.rating { 
 
    border: none; 
 
    float: left; 
 
} 
 

 
.rating > input { display: none; } 
 
.rating > label:before { 
 
    margin: 5px; 
 
    font-size: 1.25em; 
 
    font-family: FontAwesome; 
 
    display: inline-block; 
 
    content: "\f005"; 
 
} 
 

 
.rating > .half:before { 
 
    content: "\f089"; 
 
    position: absolute; 
 
} 
 

 
.rating > label { 
 
    color: #ddd; 
 
float: right; 
 
} 
 

 
/***** CSS Magic to Highlight Stars on Hover *****/ 
 

 
.rating > input:checked ~ label, /* show gold star when clicked */ 
 
.rating:not(:checked) > label:hover, /* hover current star */ 
 
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 
 

 
.rating > input:checked + label:hover, /* hover current star when changing rating */ 
 
.rating > input:checked ~ label:hover, 
 
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */ 
 
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

<fieldset class="rating"> 
 
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> 
 
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> 
 
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> 
 
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> 
 
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> 
 
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> 
 
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> 
 
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> 
 
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> 
 
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> 
 
</fieldset>