Question

如何使用Bootstrap图标通过css或jquery给出星级评分。因为我被告知不要使用任何插件，所以我很困惑如何更改星形图标的颜色，并获得从起始星到点击星的彩色星形图标。

Answer 1

您实际上可以在 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;
}

Answer 2

 <i className="fa fa-star text-warning"></i>
 <i className="fa fa-star text-warning"></i>
 <i className="fa fa-star text-warning"></i>
 <i className="fa fa-star text-warning"></i>
 <i className="fa fa-star-o text-warning"></i>

尝试此代码

如何使用像星星这样的引导图标来给出星级评分？

2 个答案:

Demo Fiddle