Email Rating System (for work)

email_insert.html

<style>
  .rating {
    float: left;
  }

  .rating:not(:checked)>input {
    position: absolute;
    top: -9999px;
    clip: rect(0, 0, 0, 0);
  }

  .rating:not(:checked)>label {
    float: right;
    width: 1em;
    padding: 0 .1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 200%;
    line-height: 1.2;
    color: #ddd;
  }

  .rating:not(:checked)>label:before {
    content: '★ ';
  }

  .rating>input:checked~label {
    color: #f70;
  }

  .rating:not(:checked)>label:hover,
  .rating:not(:checked)>label:hover~label {
    color: gold;
  }

  .rating>input:checked+label:hover,
  .rating>input:checked+label:hover~label,
  .rating>input:checked~label:hover,
  .rating>input:checked~label:hover~label,
  .rating>label:hover~input:checked~label {
    color: #ea0;
  }

  .rating>label:active {
    position: relative;
    top: 2px;
    left: 2px;
  }
</style>

<form action="/something.php" id="form-id" method="POST">
  <fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" onclick="document.getElementById('form-id').submit()">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" onclick="document.getElementById('form-id').submit()">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" onclick="document.getElementById('form-id').submit()">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" onclick="document.getElementById('form-id').submit()">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" onclick="document.getElementById('form-id').submit()">1 star</label>
  </fieldset>
</form>