การให้คะแนนดาวโดยใช้ HTML-CSS

การให้คะแนนดาว โดยใช้ HTML-CSS

การให้คะแนนสามารถทำได้หลายแบบ อย่างแรกเลยเราต้องคิดก่อนว่าโครงการของเรา ต้องการให้รูปแบบการให้คะแนนเป็นแบบไหน เพื่ออะไร

วันนี้ขอแนะนำอีก 1 ตัวอย่าง การให้คะแนนสินค้า สามารถปรับแต่งรูปแบบได้ที่หลัง นำไปใช้กลับโครงการต่างๆได้ โดยไม่เสียโครงสร้างของโครงการ ตัวอย่างโครงการ php สามารถส่งค่า value เก็บคะแนนเข้าฐานข้อมูล เพิ่มตาราง หรือแทรกในตารางโครงการนั้นๆได้เช่นกันค่ะ

ตัวอย่าง

ไม่ได้ถูกเลือก

HTML นำไปวางในหน้าที่ต้องการแสดง

<p> </p>
<p><span style="font-size:18px"><strong>ตัวอย่าง</strong></span></p>
<div class="wrapper">
<form action=# name="star-rating-form">
<h2 id="title" class="call-to-action-text">เลือกการให้คะแนน:</h2>
<div class="star-wrap">
<input class="star" checked type="radio" value="-1" id="skip-star" name="star-radio" autocomplete="off" />
<label class="star-label hidden"></label>
<input class="star" type="radio" id="st-1" value="1" name="star-radio" autocomplete="off" />
<label class="star-label" for="st-1">
<div class="star-shape"></div>
</label>
<input class="star" type="radio" id="st-2" value="2" name="star-radio" autocomplete="off" />
<label class="star-label" for="st-2">
<div class="star-shape"></div>
</label>
<input class="star" type="radio" id="st-3" value="3" name="star-radio" autocomplete="off" />
<label class="star-label" for="st-3">
<div class="star-shape"></div>
</label>
<input class="star" type="radio" id="st-4" value="4" name="star-radio" autocomplete="off" />
<label class="star-label" for="st-4">
<div class="star-shape"></div>
</label>
<input class="star" type="radio" id="st-5" value="5" name="star-radio" autocomplete="off" />
<label class="star-label" for="st-5">
<div class="star-shape"></div>
</label>
<label class="skip-button" for="skip-star">
×
</label>
</div>
</form>
<p id="result">ไม่ได้ถูกเลือก</p>
</div>

CSS สามารถนำไปวางในหน้าที่ต้องการแสดง หรือส่วนหัว ตัดปรับแต่งได้เลยค่ะ

}
.star-wrap {
width: max-content;
margin: 0 auto;
position: relative;
}
.star-label.hidden {
display: none;
}
.star-label {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
}
@media (min-width: 840px) {
.star-label {
width: 3rem;
height: 3rem;
}
}
.star-shape {
background-color: gold;
width: 80%;
height: 80%;
/*star shaped cutout, works best if it is applied to a square*/
/* from Clippy @ https://bennettfeely.com/clippy/ */
clip-path: polygon(
50% 0%,
61% 35%,
98% 35%,
68% 57%,
79% 91%,
50% 70%,
21% 91%,
32% 57%,
2% 35%,
39% 35%
);
}
/* make stars *after* the checked radio gray*/
.star:checked + .star-label ~ .star-label .star-shape {
background-color: lightgray;
}
/*hide away the actual radio inputs*/
.star {
position: fixed;
opacity: 0;
/*top: -90000px;*/
left: -90000px;
}
.star:focus + .star-label {
outline: 2px dotted black;
}
.skip-button {
display: block;
width: 2rem;
height: 2rem;
border-radius: 1rem;
position: absolute;
top: -2rem;
right: -1rem;
/*transform: translateY(-50%);*/
text-align: center;
line-height: 2rem;
font-size:2rem;
background-color: rgba(255, 255, 255, 0.1);
}
.skip-button:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#skip-star:checked ~ .skip-button {
display: none;
}
#result {
text-align: center;
padding: 1rem 2rem;
}
.exp-link {
text-align: center;
padding: 1rem 2rem;
}
.exp-link a{
color: lightgray;
text-decoration:underline;
}
</style>