Skip to content

Instantly share code, notes, and snippets.

@yoheiMune

yoheiMune/star-and-input-review.html

Last active September 6, 2019 03:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yoheiMune/8e01d4b5bb1c4a2f6b3c72868586561b to your computer and use it in GitHub Desktop.
Save yoheiMune/8e01d4b5bb1c4a2f6b3c72868586561b to your computer and use it in GitHub Desktop.
Download ZIP
星での評価を表示するCSS（星半分や1/4も対応）
Raw
star-and-input-review.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="star-rating-container">
<!-- 星の表示 -->
<div class="star-rating">
<div class="star-rating-top" style="width: 70%" id="starRatingRaito"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<div class="star-rating-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>
<!-- スライダー -->
<div>
<input type="range" class="star-rating-slider" id="starRatingSlider" min="0" max="50" step="5">
</div>
</div>
<script>
function setValue(ev) {
var value = ev.target.value;
console.log('change:', value);
document.getElementById('starRatingRaito').style.width = (value * 2) + '%';
}
document.getElementById('starRatingSlider').addEventListener('input', setValue);
document.getElementById('starRatingSlider').addEventListener('change', setValue);
document.getElementById('starRatingSlider').addEventListener('click', setValue);
</script>
<style>
.star-rating-container {
position: relative;
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.star-rating-container * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/**
スライダー.
*/
.star-rating-slider {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0.01;
}
input[type="range"]::-webkit-slider-thumb {
width: 35px;
height: 35px;
}
/**
* 星の表示.
*/
.star-rating {
display: inline-block;
color: #999999;
font-size: 50px;
margin: 0 auto;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
pointer-events: none;
}
.star-rating span {
padding: 0 0.1em;
}
.star-rating-top {
color: #4fc2cd;
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-rating-bottom {
padding: 0;
display: block;
z-index: 0;
}
body {
margin: 50px;
text-align: center;
font-family: 'Open Sans', sans-serif;
background: #f5f5f5;
}
</style>
</body>
</html>
Raw
star.html
<div class="star-ratings-css">
<div class="star-ratings-css-top" style="width: 70%"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<div class="star-ratings-css-bottom"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
</div>
<style>
.star-ratings-css {
display: inline-block;
color: #999999;
font-size: 50px;
margin: 0 auto;
position: relative;
padding: 0;
text-shadow: 0px 1px 0 #a2a2a2;
}
.star-ratings-css span {
padding: 0 0.1em;
}
.star-ratings-css-top {
color: #4fc2cd;
padding: 0;
position: absolute;
z-index: 1;
display: block;
top: 0;
left: 0;
overflow: hidden;
}
.star-ratings-css-bottom {
padding: 0;
display: block;
z-index: 0;
}
body {
margin: 50px;
text-align: center;
font-family: 'Open Sans', sans-serif;
background: #f5f5f5;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment