Pure CSS Star Rating Widget
How do I make an pure css star rating widget?
What is a pure css star rating widget? How do you make a pure css star rating widget? This script and codes were developed by James Barnett on 11 August 2022, Thursday.
Pure CSS Star Rating Widget - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Star Rating Widget</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating"> <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS Star Rating Widget - Script Codes CSS Codes
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }
/****** Style Star Rating Widget *****/
.rating { border: none; float: left;
}
.rating > input { display: none; }
.rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005";
}
.rating > .half:before { content: "\f089"; position: absolute;
}
.rating > label { color: #ddd; float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
Developer | James Barnett |
Username | jamesbarnett |
Uploaded | August 11, 2022 |
Rating | 4.5 |
Size | 2,156 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Github-style Daily Activity Chart | 4,334 Kb |
Time-based CSS Background | 2,664 Kb |
Top Left Rounded Corner in CSS | 2,615 Kb |
Demo of the US Map jQuery plugin | 2,298 Kb |
Change font size using JQuery | 2,084 Kb |
Custom select box | 2,323 Kb |
Floating Fixed Sidebar | 2,857 Kb |
Simple JSON Example | 2,513 Kb |
A Pen by James Barnett | 1,548 Kb |
Piet Mondrian Composition II | 1,919 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
GLSL Hills | Ykob | 6,991 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Loading animation | Codeams | 2,408 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!