Skip to content

Instantly share code, notes, and snippets.

@fribibb

fribibb/_browser-hacks.scss

Last active July 10, 2018 06:25
Show Gist options
  • Save fribibb/f1d282baa664627a6610435ad8b6ea98 to your computer and use it in GitHub Desktop.
Save fribibb/f1d282baa664627a6610435ad8b6ea98 to your computer and use it in GitHub Desktop.
Download ZIP
A11y/W3C ☑️ Star ratings (X-browser support = WIP)
Raw
_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
// }
}
Raw
_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;
}
}
Display the source blob
Display the rendered blob
Raw
star-cutout.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment