How to add star rating and submit rating

Manideepgoud
Posted by Manideepgoud under HTML 5 category on | Points: 40 | Views : 2324
Hi All,
In the below code, am going to define the star rating and submit them using HTML5 and CSS3.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.email-rating-hero {
text-align: center;
padding: 5% 8%;
}
h1.email-rating-hero__heading {
font-size: 2.5rem;
font-weight: 800;
}
p.email-rating-hero__subheading {
font-size: 1.5rem;
color: #999;
max-width: 520px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
span.email-rating-hero__star {
font-size: 1.9rem;
letter-spacing: 4px;
color: #CFD9E4;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
a#email-rating-hero__edit {
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
}
.additional-feedback {
padding: 6% 8%;
background: #F8F9FA;
}
h2.emailer-additional-feedback__heading {
font-weight: 700;
font-size: 1.8rem;
margin-bottom: 14px;
text-align: center;
}
.emailer-additional-feedback {
max-width: 544px;
text-align: center;
margin: auto;
}
textarea.emailer-additional-feedback__textarea {
border: 1px solid transparent;
font-size: 1.4rem;
margin-bottom: 24px;
}
textarea.emailer-additional-feedback__textarea:focus {
border-color: #FB0;
}
textarea.emailer-additional-feedback__textarea {} button#feedback-submit {
font-size: 1.5rem;
font-weight: 800;
text-align: right;
float: right;
}
button#feedback-submit:disabled {
opacity: 0.35;
}
.rating {
width: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 24px auto;
}
.rating>input {
display: none;
}
.feedback--message {
font-size: 1.5rem;
}
.rating>label {
position: relative;
width: 45px;
cursor: pointer;
color: #CFD9E4;
-webkit-transition: .1s linear;
transition: .1s linear;
font-size: 25px;
margin: 4px;
}
.rating>label::before {
content: "\2605";
position: absolute;
opacity: 0;
-webkit-transition: .1s linear;
transition: .1s linear;
}
.rating>label:hover:before,
.rating>label:hover~label:before {
opacity: 1 !important;
color: #FB0;
}
.rating>input:checked~label:before {
opacity: 1;
color: #FB0;
}
.rating:hover>input:checked~label:before {
opacity: 0;
}
.animation--rise {
-webkit-animation: fadeInUp .3s;
animation: fadeInUp .3s;
}
@keyframes fadeInUp {
from {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes fadeInUp {
from {
-webkit-transform: translateY(10px);
transform: translateY(10px);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.feedback-submit--message {
-webkit-animation: fadeInUp .3s;
animation: fadeInUp .3s;
}
@media only screen and (max-width: 478px) {
.emailer-additional-feedback__textarea {
padding-right: 12px;
}
button#feedback-submit {
float: none;
}
}

.loaderImg-rating {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="emailer-rating" class="email-rating-hero animation--rise">
<h1 class="email-rating-hero__heading"></h1>
<p class="email-rating-hero__subheading"></p>
<div class="rating" id="ratings">
<input type="radio" name="rating" value="5" id="5">
<label for="5">&#x2605;</label>
<input type="radio" name="rating" value="4" id="4">
<label for="4">&#x2605;</label>
<input type="radio" name="rating" value="3" id="3">
<label for="3">&#x2605;</label>
<input type="radio" name="rating" value="2" id="2">
<label for="2">&#x2605;</label>
<input type="radio" name="rating" value="1" id="1">
<label for="1">&#x2605;</label>
</div>
</div>
</body>
</html>

Comments or Responses

Login to post response