Skip to content

Instantly share code, notes, and snippets.

@bunda3d bunda3d/stars.css
Last active Oct 8, 2019

Embed
What would you like to do?
Star Rating Form Checkbox Input, HTML & CSS only, with Server PHP "submit" file
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* common colors */
:root {
--accent-bg: #BBBBBB;
--accent-color: #E52E62;
}
/* general text formatting */
h1, body, legend, p {
font-family: "Open Sans", Verdana, Arial, sans-serif;
}
body {
font-size: 100%;
background-color: #E8EAF6;
}
/* header */
header {
color: white;
background-color: #1A237D;
margin: 0em 4em 0.25em 4em;
}
header h1 {
padding: 0.5rem 0 0 1.25rem;
font-size: 2rem;
font-weight: bold;
}
header p {
font-size: 1rem;
font-style: italic;
margin: 0;
padding: 0 0 1rem 1.25rem;
}
/* main article styling */
main {
background-color: white;
margin: 1em 4em 1em 4em;
padding: 1em;
}
section {
margin-bottom: 1em;
padding: 0;
width: 100%;
}
/** form styling */
legend {
margin: 0;
padding: 0;
background-color: var(--accent-bg);
color: #1A237D;
text-transform: uppercase;
width: 100%;
}
fieldset {
margin: 0;
padding: 0;
background-color:#eae8e8;
width: 100%;
border: none;
}
form p {
margin-top: 0.5em;
}
table {
border: none;
border-spacing: 0;
width: 100%;
margin: 0 auto;
}
table tbody td{
line-height: 1.5em;
vertical-align: top;
padding: 0.5em 0.75em;
}
/** buttons */
.box {
border: 1pt solid var(--accent-bg);
padding: 0.5em;
margin-bottom: 0.4em;
}
.rectangle {
background-color: var(--accent-bg);
padding: 0.5em;
}
.rounded, .reset {
border: 2px solid var(--accent-color);
border-radius: 7px;
text-align: center;
font-weight: bold;
padding: 0.5em 0 0.5em 0;
margin: 0.3em;
min-width: 9em;
height: 3em;
}
.reset, .rounded:hover {
background-color: transparent;
color: var(--accent-color);
border-color: var(--accent-color);
}
.rounded, .reset:hover {
background-color: var(--accent-color);
color: white;
border-color: white;
}
button:hover {
box-shadow: 2px 2px white;
}
/* -- star rating styling -- */
div.star_rating {
float: left;
}
input.star {
border: 0;
width: 1px;
height: 1px;
overflow: hidden;
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
opacity: 0;
float: right;
}
label.star {
position: relative;
float: right;
color: #C8C8C8;
}
label.star:before {
margin: 5px;
content: "\f005";
font-family: FontAwesome;
font-size: 1.5em;
color: var(--accent-color);
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}
input.star:checked ~ label.star:before {
color: #FFC107;
}
label.star:hover ~ label.star:before {
color: #ffdb70;
}
label.star:hover:before {
color: #FFC107;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Star Rating Form Input</title>
<link rel="stylesheet" href="stars.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">
</head>
<body>
<header>
<h1>Star Rating</h1>
<p>Using input checkboxes and CSS</p>
</header>
<main>
<section>
<!-- form starts -->
<form name="star_submit" id="star_submit" action="test_form.php" method="post">
<fieldset>
<legend> Star Rating</legend>
<table>
<tr>
<td colspan="1">
<label>Rate this form's subject: </label>
<br>
<div class="star_rating">
<!-- this has 4 stars, you can change to add or subtract stars. -->
<input type="checkbox" id="star4" name="Star_Rating_of_4_stars" class="star" value="4">
<label for="star4" class="star" title="4 stars"></label>
<input type="checkbox" id="star3" name="Star_Rating_of_4_stars" class="star" value="3">
<label for="star3" class="star" title="3 stars"></label>
<input type="checkbox" id="star2" name="Star_Rating_of_4_stars" class="star" value="2">
<label for="star2" class="star" title="2 stars"></label>
<input type="checkbox" id="star1" name="Star_Rating_of_4_stars" class="star" value="1">
<label for="star1" class="star" title="1 stars"></label>
</div>
</td>
</tr>
</fieldset>
<tr>
<td colspan="1">
<!-- submit or form reset buttons -->
<div class="rectangle">
<label for="submit">
<button type="submit" id="submit" class="rounded" value="Submit">Submit</button>
</label>
<label for="reset">
<button type="reset" id="reset" class="reset" value="Reset">Reset</button>
</label>
</div>
</td>
</tr>
</table>
</form>
</section>
</main>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php
echo "<h2>Your Input:</h2>";
foreach($_POST as $key=>$value){
echo $key, ' => ', $value, "<br/>";
}
?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.