Pure CSS Rating Scale
How do I make an pure css rating scale?
What is a pure css rating scale? How do you make a pure css rating scale? This script and codes were developed by Aaron Levine on 30 January 2023, Monday.
Pure CSS Rating Scale - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Rating Scale</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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 Rating Scale</h1><br/><br/><br/>
<div class="rating_scale"> <label> <input type="radio" name="rad"/><span>1</span> </label> <label> <input type="radio" name="rad"/><span>2</span> </label> <label> <input type="radio" name="rad"/><span>3</span> </label> <label> <input type="radio" name="rad"/><span>4</span> </label> <label> <input type="radio" name="rad"/><span>5</span> </label> <label> <input type="radio" name="rad"/><span>6</span> </label> <label> <input type="radio" name="rad"/><span>7</span> </label> <label> <input type="radio" name="rad"/><span>8</span> </label> <label> <input type="radio" name="rad"/><span>9</span> </label> <label> <input type="radio" name="rad"/><span>10</span> </label>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS Rating Scale - Script Codes CSS Codes
.rating_scale { display: block; text-align: center; font-size: 0; font-weight: 800;
}
.rating_scale span { display: inline-block; box-sizing: border-box; padding: 1em; font-size: 16px; background: #666; color: #eee; border-top: solid 1px #555; border-bottom: solid 1px #555; border-right: solid 1px #555; box-shadow: inset 1px 0 1px #999, inset 0 1px 0 #ccc, inset 0 -1px 0 #333;
}
.rating_scale label:first-child span { border-left: solid 1px #555; border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em;
}
.rating_scale label:last-child span { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em;
}
.rating_scale input[type="radio"] { display: none;
}
.rating_scale input[type="radio"]:checked ~ span { background: #eee; color: #333; box-shadow: inset 0 1px 0 #999, inset 2px 0 2px #999, inset 0 -1px 0 #fff;
}
h1 { text-align: center; border-bottom: solid 2px #666; margin: 0 2em; padding: 1em;
}
html, body { background: #eee;
}
Developer | Aaron Levine |
Username | Aldlevine |
Uploaded | January 30, 2023 |
Rating | 3.5 |
Size | 2,706 Kb |
Views | 2,024 |
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 |
Blowout Menu | 4,712 Kb |
Flashy Rating Page | 4,375 Kb |
Price is Right Wheel - Better Inertia | 5,730 Kb |
IOS-7 style slide-toggle | 4,131 Kb |
Canvas Falloff Test | 2,989 Kb |
Mobile App Design | 9,243 Kb |
CSS Spinning Wireframe Sphere | 4,612 Kb |
Random Gradients - JS | 2,026 Kb |
Kaskade 0.3 - Desktop Demo | 9,186 Kb |
Card Mockup | 6,436 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 |
Countdown Timer | Massiebn | 3,001 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Social buttons | Flacu | 2,022 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Html5-canvas-snow-effect | MariamMassadeh | 2,609 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Drag n Drop | Martin42 | 2,594 Kb |
Canvas stripes | Adrianparr | 1,948 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!