डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Create UI for rating bar star using CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.stars{
width: 100%;
display: inline;
}

input.star{
display: none;
}

label.star{
float:right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all 0.2s;
cursor: pointer;
}

input.star:checked ~ label.star:before{
content: '\f005';
color:#FD4;
transition: all 0.25s;
}

label.star:before{
content:'\f006';
font-family: FontAwesome;
}

label.star:hover{
transform: rotate(-15deg) scale(1.3);
}
</style>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>

<div class="stars">
<form action="">
<input class="star star5" type="radio" id="start-5" name="star"/>
<label for="start-5" class="star start-5"></label>
<input class="star star4" type="radio" id="start-4" name="star"/>
<label for="start-4" class="star start-4"></label>
<input class="star star3" type="radio" id="start-3" name="star"/>
<label for="start-3" class="star start-3"></label>
<input class="star star2" type="radio" id="start-2" name="star"/>
<label for="start-2" class="star start-2"></label>
<input class="star star1" type="radio" id="start-1" name="star"/>
<label for="start-1" class="star start-1"></label>
</form>
</div>

</body>
</html>
© 2016 - 2023, All Rights are Reserved.