Smiley Rating System (Custom Radio Buttons CSS)

In this example below you will see how to do a Smiley Rating System (Custom Radio Buttons CSS) with some HTML / CSS and Javascript

This is a very simple rating system that uses smiley faces to measure customer satisfaction. The styling is created with only CSS and the radio button html property.

Thumbnail
This awesome code was written by wiseoldman, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wiseoldman ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Smiley Rating System (Custom Radio Buttons CSS)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form id="smileys">
	<input type="radio" name="smiley" value="sad" class="sad">
	<input type="radio" name="smiley" value="neutral" class="neutral">
	<input type="radio" name="smiley" value="happy" class="happy" checked="checked">
	<div>It looks like you're feeling <span id="result">happy</span> today..</div>
</form>

<a class="mtt" href="https://morningtrain.dk" target="_blank">
	With <span>♥</span> from Morning Train
</a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wiseoldman/smiley-rating-system-custom-radio-buttons-css-RVRgyB */
body {
  align-items: center;
  display: flex;
  font-family: Helvetica, sans-serif;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
body div {
  font-size: 15px;
  margin-top: 15px;
  text-align: center;
}

form#smileys input[type="radio"] {
  -webkit-appearance: none;
  width: 90px;
  height: 90px;
  border: none;
  cursor: pointer;
  transition: border .2s ease;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: 0 5px;
  transition: all .2s ease;
}
form#smileys input[type="radio"]:hover, form#smileys input[type="radio"]:checked {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}
form#smileys input[type="radio"]:focus {
  outline: 0;
}
form#smileys input[type="radio"].happy {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/happy_ampvnc.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].neutral {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/neutral_t3q8hz.svg") center;
  background-size: cover;
}
form#smileys input[type="radio"].sad {
  background: url("https://res.cloudinary.com/turdlife/image/upload/v1492864443/sad_bj1tuj.svg") center;
  background-size: cover;
}

.mtt {
  position: fixed;
  bottom: 10px;
  right: 20px;
  color: #999;
  text-decoration: none;
}
.mtt span {
  color: #e74c3c;
}
.mtt:hover {
  color: #666;
}
.mtt:hover span {
  color: #c0392b;
}


/*Downloaded from https://www.codeseek.co/wiseoldman/smiley-rating-system-custom-radio-buttons-css-RVRgyB */
// Simple jQuery for updating the text
// when a radio button is clicked
$('#smileys input').on('click', function() {
	$('#result').html($(this).val());
});

Comments