如何使用引导图标像星级给星级？ [英] How to use bootstrap icons like star to give the star rating?

问题描述

如何使用Bootstrap图标通过css或jquery提供星级。因为我被告知不要使用任何插件，所以我困惑了如何改变星形图标的颜色，并获得从开始明星到被点击的星星上的星形图标。

小提示

HTML

 < fieldset class =rating> 
< input type =radioid =star5name =ratingvalue =5/> 
< label for =star5> 5星< / label> 
< input type =radioid =star4name =ratingvalue =4/> 
< label for =star4> 4颗星< / label> 
< input type =radioid =star3name =ratingvalue =3/> 
< label for =star3> 3星级< / label> 
< input type =radioid =star2name =ratingvalue =2/> 
< label for =star2> 2颗星< / label> 
< input type =radioid =star1name =ratingvalue =1/> 
< label for =star1> 1颗星< / label> 
< / fieldset> 
  

CSS

  .rating {
 float：left; 
 border：none; 
} 
 .rating：not（：checked）> input {
 position：absolute; 
 top：-9999px; 
 clip：rect（0，0，0，0）; 
} 
 .rating：not（：checked）> label {
 float：right; 
 width：1em; 
 padding：0 .1em; 
 overflow：hidden; 
 white-space：nowrap; 
 cursor：pointer; 
 font-size：200％; 
 line-height：1.2; 
 color：#ddd; 
} 
 .rating：not（：checked）> label：before {
 content：'★'; 
} 
 .rating> input：checked〜label {
 color：＃f70; 
} 
 .rating：not（：checked）> label：hover，.rating：not（：checked）> label：hover〜label {
 color：gold; 
} 
 .rating>输入：checked + label：hover，.rating>输入：checked + label：hover〜label，.rating>输入：checked〜label：hover，.rating>输入：checked〜label：hover〜label，.rating> label：hover〜input：checked〜label {
 color：＃ea0; 
} 
 .rating> label：active {
 position：relative; 
} 
  

How to use the Bootstrap icons for giving the star rating through css or jquery. Since i am being told not to used any Plugins for that so i am confused on how to change the color of the star icon and get the star icon colored from starting star till the clicked star.

解决方案

You can actually do this in PURE CSS

Demo Fiddle

HTML

<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1">1 star</label>
</fieldset>

CSS

 .rating {
    float:left;
    border:none;
}
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0, 0, 0, 0);
}
.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
}
.rating:not(:checked) > label:before {
    content:'★ ';
}
.rating > input:checked ~ label {
    color: #f70;
}
.rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
    color: gold;
}
.rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label {
    color: #ea0;
}
.rating > label:active {
    position:relative;
}

这篇关于如何使用引导图标像星级给星级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！