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"].glad {
  background:url(smiley/rate5.png) center;
  background-size: cover;
}
form#smileys input[type="radio"].glad:hover, form#smileys input[type="radio"].glad:checked {
  background:url(smiley/c-rate5.png) center;
  background-size: cover;
}
form#smileys input[type="radio"].happy {
  background:url(smiley/rate4.png) center;
  background-size: cover;
}
form#smileys input[type="radio"].happy:hover, form#smileys input[type="radio"].happy:checked {
  background:url(smiley/c-rate4.2.png) center;
  background-size: cover;
}

form#smileys input[type="radio"].neutral {
  background: url(smiley/rate3.png)  center;
  background-size: cover;
}
form#smileys input[type="radio"].neutral:hover, form#smileys input[type="radio"].neutral:checked {
  background:url(smiley/c-rate3.2.png) center;
  background-size: cover;
}

form#smileys input[type="radio"].sad {
  background: url(smiley/rate2.png)  center;
  background-size: cover;
}
form#smileys input[type="radio"].sad:hover, form#smileys input[type="radio"].sad:checked {
  background:url(smiley/c-rate2.2.png) center;
  background-size: cover;
}
form#smileys input[type="radio"].mad {
  background:url(smiley/rate1.png) center;
  background-size: cover;
}

form#smileys input[type="radio"].mad:hover, form#smileys input[type="radio"].mad:checked {
  background:url('./smiley/c-rate1.2.png') center;
  background-size: cover;
}