1. 首頁
  2. 問答
  3. 多個五星評論行HTML CSS

多個五星評論行HTML CSS

2016-03-09 69 views
0

你好，
我想建立一個5星評級表格，我想要3行5星評級。下面是我有：

多個五星評論行HTML CSS

.ratingLabel { 
 
    font-family: 'Montserrat Light',Helvetica,sans-serif; 
 
    padding: 8px 0; 
 
    float: left; 
 
    color: #A9A9A9; 
 
} 
 

 
.rating { 
 
    float: right; 
 
} 
 

 
.rating input { 
 
    display: none; 
 
} 
 

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

 
.rating label:before { 
 
    margin: 5px; 
 
    font-size: 20px; 
 
    font-family: fontAwesome; 
 
    display: inline-block; 
 
    content: "\f005"; 
 
} 
 

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

 
.rating > input:checked ~ label,.rating:not(:checked) > label:hover,.rating:not(:checked) > label:hover ~ label { 
 
    color: #FFD700; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
 
    <label class="ratingLabel">Friendly advisor:</label> 
 
    <div class="rating"> 
 
    <input id="star5" name="rating" type="radio" value="5"/> 
 
    <label for="star5" class="full"></label> 
 
    <input id="star4.5" name="rating" type="radio" value="4.5"/> 
 
    <label for="star4.5" class="half"></label> 
 
    <input id="star3" name="rating" type="radio" value="3"/> 
 
    <label for="star3" class="full"></label> 
 
    <input id="star3.5" name="rating" type="radio" value="3.5"/> 
 
    <label for="star3.5" class="half"></label> 
 
    <input id="star2" name="rating" type="radio" value="2"/> 
 
    <label for="star2" class="full"></label> 
 
    <input id="star2.5" name="rating" type="radio" value="2.5"/> 
 
    <label for="star2.5" class="half"></label> 
 
    <input id="star1" name="rating" type="radio" value="1"/> 
 
    <label for="star1" class="full"></label> 
 
    <input id="star1.5" name="rating" type="radio" value="1.5"/> 
 
    <label for="star1.5" class="half"></label> 
 
    <input id="star0" name="rating" type="radio" value="0"/> 
 
    <label for="star0" class="full"></label> 
 
    <input id="star0.5" name="rating" type="radio" value="0.5"/> 
 
    <label for="star0.5" class="half"></label> 
 
    </div> 
 
</div> 
 
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
 
    <label class="ratingLabel">Call line quality:</label> 
 
    <div class="rating"> 
 
    <input id="star5" name="rating" type="radio" value="5"/> 
 
    <label for="star5" class="full"></label> 
 
    <input id="star4.5" name="rating" type="radio" value="4.5"/> 
 
    <label for="star4.5" class="half"></label> 
 
    <input id="star3" name="rating" type="radio" value="3"/> 
 
    <label for="star3" class="full"></label> 
 
    <input id="star3.5" name="rating" type="radio" value="3.5"/> 
 
    <label for="star3.5" class="half"></label> 
 
    <input id="star2" name="rating" type="radio" value="2"/> 
 
    <label for="star2" class="full"></label> 
 
    <input id="star2.5" name="rating" type="radio" value="2.5"/> 
 
    <label for="star2.5" class="half"></label> 
 
    <input id="star1" name="rating" type="radio" value="1"/> 
 
    <label for="star1" class="full"></label> 
 
    <input id="star1.5" name="rating" type="radio" value="1.5"/> 
 
    <label for="star1.5" class="half"></label> 
 
    <input id="star0" name="rating" type="radio" value="0"/> 
 
    <label for="star0" class="full"></label> 
 
    <input id="star0.5" name="rating" type="radio" value="0.5"/> 
 
    <label for="star0.5" class="half"></label> 
 
    </div> 
 
</div> 
 
<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
 
    <label class="ratingLabel">Overall satisfaction:</label> 
 
    <div class="rating"> 
 
    <input id="star5" name="rating" type="radio" value="5"/> 
 
    <label for="star5" class="full"></label> 
 
    <input id="star4.5" name="rating" type="radio" value="4.5"/> 
 
    <label for="star4.5" class="half"></label> 
 
    <input id="star3" name="rating" type="radio" value="3"/> 
 
    <label for="star3" class="full"></label> 
 
    <input id="star3.5" name="rating" type="radio" value="3.5"/> 
 
    <label for="star3.5" class="half"></label> 
 
    <input id="star2" name="rating" type="radio" value="2"/> 
 
    <label for="star2" class="full"></label> 
 
    <input id="star2.5" name="rating" type="radio" value="2.5"/> 
 
    <label for="star2.5" class="half"></label> 
 
    <input id="star1" name="rating" type="radio" value="1"/> 
 
    <label for="star1" class="full"></label> 
 
    <input id="star1.5" name="rating" type="radio" value="1.5"/> 
 
    <label for="star1.5" class="half"></label> 
 
    <input id="star0" name="rating" type="radio" value="0"/> 
 
    <label for="star0" class="full"></label> 
 
    <input id="star0.5" name="rating" type="radio" value="0.5"/> 
 
    <label for="star0.5" class="half"></label> 
 
    </div> 
 
</div>

正如你可以看到下面的link現場，選擇是根本不工作。嘗試命名3行不同，並給他們不同的ID，仍然沒有工作。

來源

2016-03-09 Denis Saidov

+2

屬性'id'不能包含'.' – Raptor

+0

看看這個，它可以幫助你 http://stackoverflow.com/questions/30991572/ rq = 1 –

+0

似乎你的代碼有問題。一旦我試圖重寫你的代碼，它正在工作。是不是？ –

回答

0

好傢伙，
感謝https://stackoverflow.com/questions/30991572/...，我已經成功地解決它。我提供的問題和答案的鏈接可被視爲這些案例的通用解決方案。這裏的變化到HTML我申請：

<div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
        <label class="ratingLabel">Friendly advisor:</label> 
        <div class="rating"> 
         <input id="star_a-5" name="rating_a" type="radio" value="5"/> 
         <label for="star_a-5" class="full"></label> 
         <input id="star_a-45" name="rating_a" type="radio" value="4.5"/> 
         <label for="star_a-45" class="half"></label> 
         <input id="star_a-3" name="rating_a" type="radio" value="3"/> 
         <label for="star_a-3" class="full"></label> 
         <input id="star_a-35" name="rating_a" type="radio" value="3.5"/> 
         <label for="star_a-35" class="half"></label> 
         <input id="star_a-2" name="rating_a" type="radio" value="2"/> 
         <label for="star_a-2" class="full"></label> 
         <input id="star_a-25" name="rating_a" type="radio" value="2.5"/> 
         <label for="star_a-25" class="half"></label> 
         <input id="star_a-1" name="rating_a" type="radio" value="1"/> 
         <label for="star_a-1" class="full"></label> 
         <input id="star_a-15" name="rating_a" type="radio" value="1.5"/> 
         <label for="star_a-15" class="half"></label> 
         <input id="star_a-0" name="rating_a" type="radio" value="0"/> 
         <label for="star_a-0" class="full"></label> 
         <input id="star_a-05" name="rating_a" type="radio" value="0.5"/> 
         <label for="star_a-05" class="half"></label> 
        </div> 
       </div> 
       <div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
        <label class="ratingLabel">Call line quality:</label> 
        <div class="rating"> 
         <input id="star_b-5" name="rating_b" type="radio" value="5"/> 
         <label for="star_b-5" class="full"></label> 
         <input id="star_b-45" name="rating_b" type="radio" value="4.5"/> 
         <label for="star_b-45" class="half"></label> 
         <input id="star_b-3" name="rating_b" type="radio" value="3"/> 
         <label for="star_b-3" class="full"></label> 
         <input id="star_b-35" name="rating_b" type="radio" value="3.5"/> 
         <label for="star_b-35" class="half"></label> 
         <input id="star_b-2" name="rating_b" type="radio" value="2"/> 
         <label for="star_b-2" class="full"></label> 
         <input id="star_b-25" name="rating_b" type="radio" value="2.5"/> 
         <label for="star_b-25" class="half"></label> 
         <input id="star_b-1" name="rating_b" type="radio" value="1"/> 
         <label for="star_b-1" class="full"></label> 
         <input id="star_b-15" name="rating_b" type="radio" value="1.5"/> 
         <label for="star_b-15" class="half"></label> 
         <input id="star_b-0" name="rating_b" type="radio" value="0"/> 
         <label for="star_b-0" class="full"></label> 
         <input id="star_b-05" name="rating_b" type="radio" value="0.5"/> 
         <label for="star_b-05" class="half"></label> 
        </div> 
       </div> 
       <div class="form-group col-lg-8 col-md-8 col-s-8 col-xs-12"> 
        <label class="ratingLabel">Overall satisfaction:</label> 
        <div class="rating"> 
         <input id="star_c-5" name="rating_c" type="radio" value="5"/> 
         <label for="star_c-5" class="full"></label> 
         <input id="star_c-45" name="rating_c" type="radio" value="4.5"/> 
         <label for="star_c-45" class="half"></label> 
         <input id="star_c-3" name="rating_c" type="radio" value="3"/> 
         <label for="star_c-3" class="full"></label> 
         <input id="star_c-35" name="rating_c" type="radio" value="3.5"/> 
         <label for="star_c-35" class="half"></label> 
         <input id="star_c-2" name="rating_c" type="radio" value="2"/> 
         <label for="star_c-2" class="full"></label> 
         <input id="star_c-25" name="rating_c" type="radio" value="2.5"/> 
         <label for="star_c-25" class="half"></label> 
         <input id="star_c-1" name="rating_c" type="radio" value="1"/> 
         <label for="star_c-1" class="full"></label> 
         <input id="star_c-15" name="rating_c" type="radio" value="1.5"/> 
         <label for="star_c-15" class="half"></label> 
         <input id="star_c-0" name="rating_c" type="radio" value="0"/> 
         <label for="star_c-0" class="full"></label> 
         <input id="star_c-05" name="rating_c" type="radio" value="0.5"/> 
         <label for="star_c-05" class="half"></label> 
        </div> 
       </div>

來源

2016-03-09 12:21:51

相關問題

 相關問題