A11y/W3C ☑️ Star ratings (X-browser support = WIP)

_browser-hacks.scss

// Browser hacks.
// ...So MS browser specific styles basically.

// IE10 + 11
// @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// IE 10 + 11
html[data-useragent*='MSIE 10'],
html[data-useragent*='Trident'][data-useragent*='rv:11.0'] {
  .star-rating-static {
    width: auto !important;

    &::after {
      left: -99999px !important;
    }
  }
}

// MS Edge
_:-ms-lang(x), _:-webkit-full-screen, .star-rating-static {
  width: 14.5rem !important;

  &::after {
    background-size: 2.9rem !important;
  }
}

// MacOS Safari
html[data-useragent*='AppleWebKit'][data-useragent*='Safari']:not([data-useragent*='Chrome']) {
  // Star rating tweaks
  .star-rating-static.large:after {
    background-size: 6.01rem;
  }

  meter {
    -webkit-appearance: initial !important;
  }

  // .star-rating-static:after {
  //   background-size: 2.82rem; // causes minor alignment issues
  // }
}

// iOS Safari
html[data-useragent*='AppleWebKit'][data-useragent*='Mobile']:not([data-useragent*='Chrome']) {
  // Star rating tweaks
  // .star-rating-static:after {
  //   background-size: 2.82rem;  // causes minor alignment issues
  // }
}

_star-rating.scss

.star-rating {
  .criteria {
    color: $colour-grey-text;
  }
}

// Output version
.star-rating-static {
  height: 3rem;
  width: 14rem;

  &::after {
    background: url('/imgs/star-cutout.svg') repeat-x $colour-transparent;
    background-size: $star-rating-total-size * 1.077;
    content: '';
    display: block;
    height: 100%;
    position: relative;
    top: -100%;
  }

  meter {
    height: $star-rating-total-size;
    width: 100%;

    // Theses seem to need to be seperate to work ¯\_(ツ)_/¯
    &::-webkit-meter-bar {
      background: none;
      background-color: $colour-grey-light;
      border: 0;
      outline: 0;
    }

    &::-moz-meter-bar {
      background: none;
      background-color: $colour-grey-light;
    }

    &::-webkit-meter-optimum-value {
      background: $colour-primary-dark;
    }

    &::-moz-meter-bar {
      background: $colour-primary-dark;
    }
  }

  .fallback {
    color: $colour-primary-dark;
    display: inline-block;
    font-weight: 600;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
  }

  &.large {
    height: 3rem * 2;
    width: 30rem;

    &::after {
      background-size: 6rem;
    }

    meter {
      height: $star-rating-total-size * 2;
    }
  }
}

// Input version
.star-rating-input-wrapper {

  .review-question {
    color: $colour-grey-text;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: $star-rating-input-total-size;
  }

  input[type=radio] {
    -webkit-tap-highlight-color: rgba(0,0,0,0); // removes default iOS select state
    all: initial;
    float: left;

    // Default
    & ~ label .bg-colour {
      background-color: $colour-primary-dark;
    }

    // When no selection has been made yet.
    &:invalid ~ label .bg-colour {
      background-color: $colour-grey-light;
    }

    // The currently selected one (has been clicked on)
    &:checked + label {

      .bg-colour {
        background-color: $colour-primary-dark;
      }

      // After the selected, but not including it
      & ~ label .bg-colour {
        background-color: $colour-grey-light;
      }
    }
  }

  // fieldset
  .review-item {
    &:focus-within {
      label {
        .bg-colour {
          background-color: $colour-primary-dark;
        }
        @media (hover) {
          &:hover .bg-colour {
            background-color: $colour-primary;
          }
        }
      }
    }
  }

  label {
    background-color: $colour-transparent;
    display: inline-block;
    float: left;
    height: $star-rating-input-total-size;
    margin: 0;
    outline: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: $star-rating-input-secion-size;

    .bg-colour,
    .click-target {
      content: '';
      height: $star-rating-input-total-size;
      margin: 0;
      outline: 0;
      padding: 0;
      position: absolute;
      width: 100%;
    }

    .bg-colour {
      background-color: $colour-grey-light;
    }

    .click-target {
      background-color: $colour-transparent;
      cursor: pointer;
      z-index: 1;
    }
  }

  .star-rating-input {
    height: $star-rating-input-total-size;
    margin: 0;

    @media (hover) {
      &:hover {
        // If a selection has been made
        input[type=radio]:valid ~ label .bg-colour {
          background-color: $colour-primary;
        }

        // The current *selected* item
        & > input[type=radio] {
          & + label {
            // The default
            .bg-colour {
              background-color: $colour-primary;
            }

            &:hover {
              .bg-colour {
                background-color: $colour-primary;
              }

              // Any after the currently hovered label
              & ~ label .bg-colour  {
                background-color: $colour-grey-light;
              }
            }
          }

          &:hover {
            // Any after the currently hovered label
            & ~ label .bg-colour  {
              background-color: $colour-grey-light;
            }
            
            & + label {
              .bg-colour {
                background-color: $colour-primary;
              }
            }
          }

          // If a selection has been made
          input[type=radio] ~ label .bg-colour {
            background-color: $colour-primary;
          }
        }
      }
    }
  }

  .star-overlay {
    background: url('/imgs/star-cutout.svg') repeat-x $colour-transparent;
    background-size: $star-rating-input-total-size * 1.077;
    content: '';
    display: block;
    height: $star-rating-input-total-size;
    margin: 0 !important;
    position: relative;
  }
}

star-cutout.svg

star-ratings.html

<!-- Larger, read-only version -->
<div class="rating-overall" itemscope itemtype="http://schema.org/AggregateRating">
  <meta itemprop="itemReviewed" content="{Product name}">
  <meta itemprop="worstRating" content="0.25">
  <meta itemprop="bestRating" content="5">
  <div class="star-rating-static large">
    <meter itemprop="ratingValue" min="0" value="4.5" max="5">
      <span class="fallback">4.5 out of 5</span>
    </meter>
  </div>
  <div class="heading">overall</div>
  <div class="review-card overall">
    <div class="review-item">
      <div class="row">
        <div class="review-question column">
          Criteria 1
        </div>
        <div class="review-rating column">
          <div class="star-rating-static">
            <meter min="0" value="2.25" max="5">
              <span class="fallback">2.25 out of 5</span>
            </meter>
          </div>
        </div>
      </div>
    </div>
    <div class="review-item">
      <div class="row">
        <div class="review-question column">
          Criteria 2
        </div>
        <div class="review-rating column">
          <div class="star-rating-static">
            <meter min="0" value="3.5" max="5">
              <span class="fallback">3.5 out of 5</span>
            </meter>
          </div>
        </div>
      </div>
    </div>
    <div class="review-item">
      <div class="row">
        <div class="review-question column">
          Criteria 3
        </div>
        <div class="review-rating column">
          <div class="star-rating-static">
            <meter min="0" value="3.75" max="5">
              <span class="fallback">3.75 out of 5</span>
            </meter>
          </div>
        </div>
      </div>
    </div>
    <div class="review-item">
      <div class="row">
        <div class="review-question column">
          Criteria 4
        </div>
        <div class="review-rating column">
          <div class="star-rating-static">
            <meter min="0" value="5" max="5">
              <span class="fallback">5 out of 5</span>
            </meter>
          </div>
        </div>
      </div>
    </div>
  </div>
  <em>Based on <span itemprop="ratingCount">219</span> reviews.</em>
</div>


<!-- Read-only version -->

<div class="comment-review review-card">
  <div class="review-item">
    <div class="row">
      <div class="review-question column">
        I would recommend {product} to a friend
      </div>
      <div class="review-rating column">
        <div class="star-rating-static">
          <meter min="0" value="2.75" max="5">
            <span class="fallback">2.75 out of 5</span>
          </meter>
        </div>
      </div>
    </div>
  </div>
  <div class="review-item">
    <div class="row">
      <div class="review-question column">
        There are criteria that will actually be this long, if not even longer than this one, so we need to see how this looks&hellip;
      </div>
      <div class="review-rating column">
        <div class="star-rating-static">
          <meter min="0" value="1.5" max="5">
            <span class="fallback">1.5 out of 5</span>
          </meter>
        </div>
      </div>
    </div>
  </div>
  <div class="review-item">
    <div class="row">
      <div class="review-question column">
        But then, other criteria will be roughly this long. This is a good average.
      </div>
      <div class="review-rating column">
        <div class="star-rating-static">
          <meter min="0" value="4.5" max="5">
            <span class="fallback">4.5 out of 5</span>
          </meter>
        </div>
      </div>
    </div>
  </div>
  <div class="review-item">
    <div class="row">
      <div class="review-question column">
        I would recommend {product} to a friend
      </div>
      <div class="review-rating column">
        <div class="star-rating-static">
          <meter min="0" value="3.25" max="5">
            <span class="fallback">3.25 out of 5</span>
          </meter>
        </div>
      </div>
    </div>
  </div>
  <div class="review-item">
    <div class="row">
      <div class="review-question column">
        I would recommend {product} to a friend
      </div>
      <div class="review-rating column">
        <div class="star-rating-static">
          <meter min="0" value="5" max="5">
            <span class="fallback">5 out of 5</span>
          </meter>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- Input -->

<form action="/review-done.html#review-thanks" method="post">
  <fieldset>
    <legend class="hidden">What did you think?</legend>

    <label for="title" class="control-label">
      Title
      <small class="helper-text">10 words or less<span class="desktop-only">, give us a headline for your review</span></small>
      <input class="form-control" type="text" name="title" id="title" value="" autocomplete="off" placeholder=" " minlength="3" required>
    </label>

    <label for="comment">
      Your review
      <small class="helper-text">Based off first-hand experience<span class="desktop-only"> with this product</span></small>
      <textarea data-type="entry" name="comment" id="comment" rows="5" class="form-control" placeholder=" " minlength="10" required></textarea>
    </label>
  </fieldset>

  <div class="review-card input star-rating-input-wrapper">
    <fieldset class="review-item">
      <div class="row">
        <legend class="review-question column">
            Criteria 1
            <span class="hidden"> (Rating out of 5)</span>
        </legend>
        <div class="review-rating column">
          <div class="star-rating-input">
            <input type="radio" id="input-criteria-1-star-025" name="input-criteria-1-rating" value="0.25" required>
            <label for="input-criteria-1-star-025">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.25</span>
            </label>
            <input type="radio" id="input-criteria-1-star-05" name="input-criteria-1-rating" value="0.5">
            <label for="input-criteria-1-star-05">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.5</span>
            </label>
            <input type="radio" id="input-criteria-1-star-075" name="input-criteria-1-rating" value="0.75">
            <label for="input-criteria-1-star-075">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.75</span>
            </label>
            <input type="radio" id="input-criteria-1-star-1" name="input-criteria-1-rating" value="1">
            <label for="input-criteria-1-star-1">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1</span>
            </label>

            <input type="radio" id="input-criteria-1-star-125" name="input-criteria-1-rating" value="1.25">
            <label for="input-criteria-1-star-125">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.25</span>
            </label>
            <input type="radio" id="input-criteria-1-star-15" name="input-criteria-1-rating" value="1.5">
            <label for="input-criteria-1-star-15">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.5</span>
            </label>
            <input type="radio" id="input-criteria-1-star-175" name="input-criteria-1-rating" value="1.75">
            <label for="input-criteria-1-star-175">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.75</span>
            </label>
            <input type="radio" id="input-criteria-1-star-2" name="input-criteria-1-rating" value="2">
            <label for="input-criteria-1-star-2">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2</span>
            </label>

            <input type="radio" id="input-criteria-1-star-225" name="input-criteria-1-rating" value="2.25">
            <label for="input-criteria-1-star-225">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.25</span>
            </label>
            <input type="radio" id="input-criteria-1-star-25" name="input-criteria-1-rating" value="2.5">
            <label for="input-criteria-1-star-25">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.5</span>
            </label>
            <input type="radio" id="input-criteria-1-star-275" name="input-criteria-1-rating" value="2.75">
            <label for="input-criteria-1-star-275">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.75</span>
            </label>
            <input type="radio" id="input-criteria-1-star-3" name="input-criteria-1-rating" value="3">
            <label for="input-criteria-1-star-3">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3</span>
            </label>

            <input type="radio" id="input-criteria-1-star-325" name="input-criteria-1-rating" value="3.25">
            <label for="input-criteria-1-star-325">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.25</span>
            </label>
            <input type="radio" id="input-criteria-1-star-35" name="input-criteria-1-rating" value="3.5">
            <label for="input-criteria-1-star-35">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.5</span>
            </label>
            <input type="radio" id="input-criteria-1-star-375" name="input-criteria-1-rating" value="3.75">
            <label for="input-criteria-1-star-375">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.75</span>
            </label>
            <input type="radio" id="input-criteria-1-star-4" name="input-criteria-1-rating" value="4">
            <label for="input-criteria-1-star-4">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4</span>
            </label>

            <input type="radio" id="input-criteria-1-star-425" name="input-criteria-1-rating" value="4.25">
            <label for="input-criteria-1-star-425">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.25</span>
            </label>
            <input type="radio" id="input-criteria-1-star-45" name="input-criteria-1-rating" value="4.5">
            <label for="input-criteria-1-star-45">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.5</span>
            </label>
            <input type="radio" id="input-criteria-1-star-475" name="input-criteria-1-rating" value="4.75">
            <label for="input-criteria-1-star-475">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.75</span>
            </label>
            <input type="radio" id="input-criteria-1-star-5" name="input-criteria-1-rating" value="5">
            <label for="input-criteria-1-star-5">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">5</span>
            </label>
            <div class="star-overlay"></div>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class="review-item">
      <div class="row">
        <legend class="review-question column">
            Criteria 2
            <span class="hidden"> (Rating out of 5)</span>
        </legend>
        <div class="review-rating column">
          <div class="star-rating-input">
            <input type="radio" id="input-criteria-2-star-025" name="input-criteria-2-rating" value="0.25" required>
            <label for="input-criteria-2-star-025">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.25</span>
            </label>
            <input type="radio" id="input-criteria-2-star-05" name="input-criteria-2-rating" value="0.5">
            <label for="input-criteria-2-star-05">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.5</span>
            </label>
            <input type="radio" id="input-criteria-2-star-075" name="input-criteria-2-rating" value="0.75">
            <label for="input-criteria-2-star-075">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.75</span>
            </label>
            <input type="radio" id="input-criteria-2-star-1" name="input-criteria-2-rating" value="1">
            <label for="input-criteria-2-star-1">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1</span>
            </label>

            <input type="radio" id="input-criteria-2-star-125" name="input-criteria-2-rating" value="1.25">
            <label for="input-criteria-2-star-125">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.25</span>
            </label>
            <input type="radio" id="input-criteria-2-star-15" name="input-criteria-2-rating" value="1.5">
            <label for="input-criteria-2-star-15">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.5</span>
            </label>
            <input type="radio" id="input-criteria-2-star-175" name="input-criteria-2-rating" value="1.75">
            <label for="input-criteria-2-star-175">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.75</span>
            </label>
            <input type="radio" id="input-criteria-2-star-2" name="input-criteria-2-rating" value="2">
            <label for="input-criteria-2-star-2">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2</span>
            </label>

            <input type="radio" id="input-criteria-2-star-225" name="input-criteria-2-rating" value="2.25">
            <label for="input-criteria-2-star-225">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.25</span>
            </label>
            <input type="radio" id="input-criteria-2-star-25" name="input-criteria-2-rating" value="2.5">
            <label for="input-criteria-2-star-25">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.5</span>
            </label>
            <input type="radio" id="input-criteria-2-star-275" name="input-criteria-2-rating" value="2.75">
            <label for="input-criteria-2-star-275">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.75</span>
            </label>
            <input type="radio" id="input-criteria-2-star-3" name="input-criteria-2-rating" value="3">
            <label for="input-criteria-2-star-3">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3</span>
            </label>

            <input type="radio" id="input-criteria-2-star-325" name="input-criteria-2-rating" value="3.25">
            <label for="input-criteria-2-star-325">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.25</span>
            </label>
            <input type="radio" id="input-criteria-2-star-35" name="input-criteria-2-rating" value="3.5">
            <label for="input-criteria-2-star-35">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.5</span>
            </label>
            <input type="radio" id="input-criteria-2-star-375" name="input-criteria-2-rating" value="3.75">
            <label for="input-criteria-2-star-375">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.75</span>
            </label>
            <input type="radio" id="input-criteria-2-star-4" name="input-criteria-2-rating" value="4">
            <label for="input-criteria-2-star-4">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4</span>
            </label>

            <input type="radio" id="input-criteria-2-star-425" name="input-criteria-2-rating" value="4.25">
            <label for="input-criteria-2-star-425">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.25</span>
            </label>
            <input type="radio" id="input-criteria-2-star-45" name="input-criteria-2-rating" value="4.5">
            <label for="input-criteria-2-star-45">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.5</span>
            </label>
            <input type="radio" id="input-criteria-2-star-475" name="input-criteria-2-rating" value="4.75">
            <label for="input-criteria-2-star-475">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.75</span>
            </label>
            <input type="radio" id="input-criteria-2-star-5" name="input-criteria-2-rating" value="5">
            <label for="input-criteria-2-star-5">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">5</span>
            </label>
            <div class="star-overlay"></div>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class="review-item">
      <div class="row">
        <legend class="review-question column">
            Criteria 3 which we need to test if in case it is extra long and may try to wrap over multiple lines. This shouldn't be too much of a problem, unless you care about readability + aesthetics.
            <span class="hidden"> (Rating out of 5)</span>
        </legend>
        <div class="review-rating column">
          <div class="star-rating-input">
            <input type="radio" id="input-criteria-3-star-025" name="input-criteria-3-rating" value="0.25" required>
            <label for="input-criteria-3-star-025">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.25</span>
            </label>
            <input type="radio" id="input-criteria-3-star-05" name="input-criteria-3-rating" value="0.5">
            <label for="input-criteria-3-star-05">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.5</span>
            </label>
            <input type="radio" id="input-criteria-3-star-075" name="input-criteria-3-rating" value="0.75">
            <label for="input-criteria-3-star-075">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.75</span>
            </label>
            <input type="radio" id="input-criteria-3-star-1" name="input-criteria-3-rating" value="1">
            <label for="input-criteria-3-star-1">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1</span>
            </label>

            <input type="radio" id="input-criteria-3-star-125" name="input-criteria-3-rating" value="1.25">
            <label for="input-criteria-3-star-125">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.25</span>
            </label>
            <input type="radio" id="input-criteria-3-star-15" name="input-criteria-3-rating" value="1.5">
            <label for="input-criteria-3-star-15">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.5</span>
            </label>
            <input type="radio" id="input-criteria-3-star-175" name="input-criteria-3-rating" value="1.75">
            <label for="input-criteria-3-star-175">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.75</span>
            </label>
            <input type="radio" id="input-criteria-3-star-2" name="input-criteria-3-rating" value="2">
            <label for="input-criteria-3-star-2">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2</span>
            </label>

            <input type="radio" id="input-criteria-3-star-225" name="input-criteria-3-rating" value="2.25">
            <label for="input-criteria-3-star-225">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.25</span>
            </label>
            <input type="radio" id="input-criteria-3-star-25" name="input-criteria-3-rating" value="2.5">
            <label for="input-criteria-3-star-25">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.5</span>
            </label>
            <input type="radio" id="input-criteria-3-star-275" name="input-criteria-3-rating" value="2.75">
            <label for="input-criteria-3-star-275">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.75</span>
            </label>
            <input type="radio" id="input-criteria-3-star-3" name="input-criteria-3-rating" value="3">
            <label for="input-criteria-3-star-3">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3</span>
            </label>

            <input type="radio" id="input-criteria-3-star-325" name="input-criteria-3-rating" value="3.25">
            <label for="input-criteria-3-star-325">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.25</span>
            </label>
            <input type="radio" id="input-criteria-3-star-35" name="input-criteria-3-rating" value="3.5">
            <label for="input-criteria-3-star-35">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.5</span>
            </label>
            <input type="radio" id="input-criteria-3-star-375" name="input-criteria-3-rating" value="3.75">
            <label for="input-criteria-3-star-375">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.75</span>
            </label>
            <input type="radio" id="input-criteria-3-star-4" name="input-criteria-3-rating" value="4">
            <label for="input-criteria-3-star-4">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4</span>
            </label>

            <input type="radio" id="input-criteria-3-star-425" name="input-criteria-3-rating" value="4.25">
            <label for="input-criteria-3-star-425">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.25</span>
            </label>
            <input type="radio" id="input-criteria-3-star-45" name="input-criteria-3-rating" value="4.5">
            <label for="input-criteria-3-star-45">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.5</span>
            </label>
            <input type="radio" id="input-criteria-3-star-475" name="input-criteria-3-rating" value="4.75">
            <label for="input-criteria-3-star-475">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.75</span>
            </label>
            <input type="radio" id="input-criteria-3-star-5" name="input-criteria-3-rating" value="5">
            <label for="input-criteria-3-star-5">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">5</span>
            </label>
            <div class="star-overlay"></div>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class="review-item">
      <div class="row">
        <legend class="review-question column">
            Criteria 4
            <span class="hidden"> (Rating out of 5)</span>
        </legend>
        <div class="review-rating column">
          <div class="star-rating-input">
            <input type="radio" id="input-criteria-4-star-025" name="input-criteria-4-rating" value="0.25" required>
            <label for="input-criteria-4-star-025">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.25</span>
            </label>
            <input type="radio" id="input-criteria-4-star-05" name="input-criteria-4-rating" value="0.5">
            <label for="input-criteria-4-star-05">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.5</span>
            </label>
            <input type="radio" id="input-criteria-4-star-075" name="input-criteria-4-rating" value="0.75">
            <label for="input-criteria-4-star-075">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">0.75</span>
            </label>
            <input type="radio" id="input-criteria-4-star-1" name="input-criteria-4-rating" value="1">
            <label for="input-criteria-4-star-1">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1</span>
            </label>

            <input type="radio" id="input-criteria-4-star-125" name="input-criteria-4-rating" value="1.25">
            <label for="input-criteria-4-star-125">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.25</span>
            </label>
            <input type="radio" id="input-criteria-4-star-15" name="input-criteria-4-rating" value="1.5">
            <label for="input-criteria-4-star-15">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.5</span>
            </label>
            <input type="radio" id="input-criteria-4-star-175" name="input-criteria-4-rating" value="1.75">
            <label for="input-criteria-4-star-175">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">1.75</span>
            </label>
            <input type="radio" id="input-criteria-4-star-2" name="input-criteria-4-rating" value="2">
            <label for="input-criteria-4-star-2">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2</span>
            </label>

            <input type="radio" id="input-criteria-4-star-225" name="input-criteria-4-rating" value="2.25">
            <label for="input-criteria-4-star-225">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.25</span>
            </label>
            <input type="radio" id="input-criteria-4-star-25" name="input-criteria-4-rating" value="2.5">
            <label for="input-criteria-4-star-25">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.5</span>
            </label>
            <input type="radio" id="input-criteria-4-star-275" name="input-criteria-4-rating" value="2.75">
            <label for="input-criteria-4-star-275">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">2.75</span>
            </label>
            <input type="radio" id="input-criteria-4-star-3" name="input-criteria-4-rating" value="3">
            <label for="input-criteria-4-star-3">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3</span>
            </label>

            <input type="radio" id="input-criteria-4-star-325" name="input-criteria-4-rating" value="3.25">
            <label for="input-criteria-4-star-325">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.25</span>
            </label>
            <input type="radio" id="input-criteria-4-star-35" name="input-criteria-4-rating" value="3.5">
            <label for="input-criteria-4-star-35">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.5</span>
            </label>
            <input type="radio" id="input-criteria-4-star-375" name="input-criteria-4-rating" value="3.75">
            <label for="input-criteria-4-star-375">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">3.75</span>
            </label>
            <input type="radio" id="input-criteria-4-star-4" name="input-criteria-4-rating" value="4">
            <label for="input-criteria-4-star-4">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4</span>
            </label>

            <input type="radio" id="input-criteria-4-star-425" name="input-criteria-4-rating" value="4.25">
            <label for="input-criteria-4-star-425">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.25</span>
            </label>
            <input type="radio" id="input-criteria-4-star-45" name="input-criteria-4-rating" value="4.5">
            <label for="input-criteria-4-star-45">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.5</span>
            </label>
            <input type="radio" id="input-criteria-4-star-475" name="input-criteria-4-rating" value="4.75">
            <label for="input-criteria-4-star-475">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">4.75</span>
            </label>
            <input type="radio" id="input-criteria-4-star-5" name="input-criteria-4-rating" value="5">
            <label for="input-criteria-4-star-5">
              <span class="bg-colour"></span>
              <span class="click-target"></span>
              <span class="hidden">5</span>
            </label>
            <div class="star-overlay"></div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <input type="submit" value="Post review">
</form>