星级评定CSS的问题 [英] Issue with star rating css

问题描述

我想实施星级评定，我正在研究以下星级评定代码.它正在工作，但问题是，如果我给的评级为1，那么我将无法取消选择我先前选择的那颗星.它仅在第一颗恒星上发生，因为它没有任何恒星附着，因此用户可以选择它以取消选择先前选择的恒星.

I want to implement star rating I'm working on the following star rating code. It is working but the issue is if I have given 1 rating then I cannot deselect that one star that I have previously selected. It is happening only on the first star, because it doesn't have any star attached to it so that user can select it to deselect the previously selected star.

@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>

推荐答案

如果您有一系列可见的单选按钮，并且想要取消选中所有按钮，则必须具有另一个单选按钮(可见或不可见)，您可以改为查看.

If you have a series of visible radio buttons and you want to uncheck all of them, you must have another radio button (visible or invisible) which you can check instead.

这使检查焦点可以移出先前选中的任何可见单选按钮.

This enables the check-focus to move off whichever visible radio button was checked previously.

在下面的示例中，我添加了一个不可见的单选选项(称为 .reset-option )和一个< button> (称为 .reset-button)，将其单击时会将检查焦点从当前选中的单选按钮移到不可见的单选选项.

In the example below I have added an invisible radio option (called .reset-option) and a <button> (called .reset-button) which, when clicked, moves the check-focus from whichever radio button is currently checked to the invisible radio option.

工作示例:

const resetOption = document.getElementsByClassName('reset-option')[0];
const resetButton = document.getElementsByClassName('reset-button')[0];

const resetRating = () => resetOption.checked = true;

resetButton.addEventListener('click', resetRating, false);

@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 > [id^="star"] { 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 > [id^="star"]: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 > [id^="star"]:checked + label:hover, /* hover current star when changing rating */
.rating > [id^="star"]:checked ~ label:hover,
.rating > label:hover ~ [id^="star"]:checked ~ label, /* lighten current selection */
.rating > [id^="star"]:checked ~ label:hover ~ label { color: #FFED85;  }

.reset-option {
display: none;
}

.reset-button {
margin: 6px 12px;
background-color: rgb(255, 255, 255);
text-transform: uppercase;
}

<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>
    <input type="radio" class="reset-option" name="rating" value="reset" />
</fieldset>

<button type="button" class="reset-button">Reset</button>

这篇关于星级评定CSS的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！