Skip to content

Instantly share code, notes, and snippets.

@XmlmXmlmX
Created November 23, 2016 14:37
Show Gist options
  • Save XmlmXmlmX/89f6f4c2c70f4c0cf2d3faffba933ccd to your computer and use it in GitHub Desktop.
Save XmlmXmlmX/89f6f4c2c70f4c0cf2d3faffba933ccd to your computer and use it in GitHub Desktop.
Rating
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Rating</title>
</head>
<body>
<fieldset class="stars rating" id="rate1">
<label>Rate this comment:</label>
<input type="hidden" id="rate1_hiddenngmodel" />
<input type="radio" name="rate1_ratinggroup" id="rate1_1" value="1" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
<label for="rate1_1"><span class="show-for-sr">1</span></label>
<input type="radio" name="rate1_ratinggroup" id="rate1_2" value="2" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
<label for="rate1_2"><span class="show-for-sr">2</span></label>
<input type="radio" name="rate1_ratinggroup" id="rate1_3" value="3" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
<label for="rate1_3"><span class="show-for-sr">3</span></label>
<input type="radio" name="rate1_ratinggroup" id="rate1_4" value="4" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
<label for="rate1_4"><span class="show-for-sr">4</span></label>
<input type="radio" name="rate1_ratinggroup" id="rate1_5" value="5" onclick="document.getElementById('rate1_hiddenngmodel').value = this.value;" />
<label for="rate1_5"><span class="show-for-sr">5</span></label>
</fieldset>
</body>
</html>
.rating {
unicode-bidi: bidi-override;
direction: rtl;
text-align: left;
&.stars {
> input[type="radio"] {
+ label {
margin: 0;
padding: 0;
&:before {
content: '\2606'; // ☆
border: 0;
position: relative;
width: auto;
height: auto;
font-size: 3em;
}
}
+ label:hover,
+ label:hover ~ input[type="radio"] + label {
color: $success-color;
}
+ label:hover,
+ label:hover ~ input[type="radio"] + label,
&:checked + label,
&:checked + label ~ input[type="radio"] + label {
&::before {
content: '\2605'; // ★
border: 0;
}
}
&:active, &:active {
+ label::before {
box-shadow: none;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment