Question

您好我使用html和css评级星。我尝试在css代码中使用:checked 但是评级星不能保持评级值。所以我怎样才能保持评级值。对此有任何建议。谢谢支持

这是html

<div class="rate-container">
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
</div>

的CSS

.rate-container > i {
        float: right;
    }

    .rate-container > i:HOVER,
    .rate-container > i:HOVER ~ i {
        color: gold;
    }

Answer 1

最简单的HTML CSS代码评级。

<强> INDEX.HTML

d.vals = make(custMap)

您的CSS代码 - 的的style.css

<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Star Rating.css</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="titleheading">Star Rating Using CSS</div> <div class="cont" style="margin-top:30px;"> <div class="title"> <h1>Rating<span>.css</span></h1> </div> <div class="stars"> <form action=""> <input class="star star-5" id="star-5" type="radio" name="star"/> <label class="star star-5" for="star-5"></label> <input class="star star-4" id="star-4" type="radio" name="star"/> <label class="star star-4" for="star-4"></label> <input class="star star-3" id="star-3" type="radio" name="star"/> <label class="star star-3" for="star-3"></label> <input class="star star-2" id="star-2" type="radio" name="star"/> <label class="star star-2" for="star-2"></label> <input class="star star-1" id="star-1" type="radio" name="star"/> <label class="star star-1" for="star-1"></label> </form> </div> <p>click the stars</p> </div> <div class="cont"> <div class="stars"> <form action=""> <input class="star star-5" id="star-5-2" type="radio" name="star"/> <label class="star star-5" for="star-5-2"></label> <input class="star star-4" id="star-4-2" type="radio" name="star"/> <label class="star star-4" for="star-4-2"></label> <input class="star star-3" id="star-3-2" type="radio" name="star"/> <label class="star star-3" for="star-3-2"></label> <input class="star star-2" id="star-2-2" type="radio" name="star"/> <label class="star star-2" for="star-2-2"></label> <input class="star star-1" id="star-1-2" type="radio" name="star"/> <label class="star star-1" for="star-1-2"></label> </form> </div> </div> </body> </html>

输出结果为 -

Click To Download Complete Code

Answer 2

您可以保留当前页面的选择（但不会存储）：

.rating {
  border: none;
  float: left;
}
.rating > input {
  display: none;
}
.rating > label:before {
  display: inline-block;
  content: " \2605";
}
.rating > label {
  float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #FFD700;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FFED85;
}

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

基于此答案：http://codepen.io/jamesbarnett/pen/vlpkh

Answer 3

你可以用纯html / css来做到这一点。我曾经为我自己的网站做过这个。希望这段代码足以让你前进。

您必须做的最大改变是使用\f005;属性将font-family: FontAwesome属性更改为.rating { display: inline-block; } .rating:not(:checked) > input { display:none; } .rating:not(:checked) > label { float: right; width: 28px; padding: 0 4px; overflow: hidden; white-space: nowrap; cursor: pointer; font-size: 200%; line-height: 1.2; color: #ddd; filter: saturate(0); -webkit-filter: saturate(0); -moz-filter: saturate(0); -o-filter: saturate(0); } .rating:not(:checked) > label:before { content: url("http://i.imgur.com/1dT6Fai.png") ' '; } .rating > input:checked ~ label { filter: saturate(1); -webkit-filter: saturate(1); -moz-filter: saturate(1); -o-filter: saturate(1); } .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { filter: hue-rotate(-50deg); -webkit-filter: hue-rotate(-50deg); -moz-filter: hue-rotate(-50deg); -o-filter:hue-rotate(-50deg); } .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 { filter: hue-rotate(-50deg); -webkit-filter: hue-rotate(-50deg); -moz-filter: hue-rotate(-50deg); -o-filter:hue-rotate(-50deg); }，因为我使用了图标而不是字体。其余的应该或多或少相同。

祝你好运！

<ul id="results" class="profile-list">
    <li ng-repeat="profile in profiles track by profile.id" ng-class-odd="'odd'" ng-cloak ng-class="profile.role" class="profile clearfix">

        <div ng-switch="profile.role == 'company' || profile.role == 'school'">
            <div ng-switch-when="true">
                <?= $this->partial('index/_profile_badge_school_company.phtml') ?>
            </div>
            <div ng-switch-default>
                <?= $this->partial('index/_profile_badge_student.phtml') ?>
            </div>
        </div>

    </li>
</ul>
<uib-pagination ng-if="profiles.length > 0" total-items="resultCount" ng-model="$parent.currentPage" max-size="maxSize"
                class="pagination-sm" num-pages="numPages" ng-change="loadResults()"></uib-pagination>

Demo

我应该注意，这段代码的灵感来自网上的其他一些来源。不幸的是，我没有链接。

评级明星不工作

3 个答案: