<svg style="display: none;">
  <symbol id="star" viewBox="0 0 1024 1024"><polygon points="512 0 627 354 999 354 698 572 813 926 512 708 211 926 326 572 25 354 397 354 512 0"/></symbol>
</svg>

<form id="all-stars">
<fieldset class="button-group">
<legend class="label">Inline-Block Stars</legend>

<div class="stars ib">
  <input class="star" type="radio" name="ib-star" id="ib-star-5" value="5">
  <label for="ib-star-5"><svg><title>Five Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="ib-star" id="ib-star-4" value="4">
  <label for="ib-star-4"><svg><title>Four Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="ib-star" id="ib-star-3" value="3">
  <label for="ib-star-3"><svg><title>Three Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="ib-star" id="ib-star-2" value="2" checked>
  <label for="ib-star-2"><svg><title>Two Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="ib-star" id="ib-star-1" value="1">
  <label for="ib-star-1"><svg><title>One Star</title><use xlink:href="#star"></use></svg></label>
  
</div>
</fieldset>

<fieldset class="button-group">
<legend class="label">Float Stars</legend>

<div class="stars float">
  <input class="star" type="radio" name="float-star" id="float-star-5" value="5">
  <label for="float-star-5"><svg><title>Five Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="float-star" id="float-star-4" value="4">
  <label for="float-star-4"><svg><title>Four Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="float-star" id="float-star-3" value="3" checked>
  <label for="float-star-3"><svg><title>Three Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="float-star" id="float-star-2" value="2">
  <label for="float-star-2"><svg><title>Two Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="float-star" id="float-star-1" value="1">
  <label for="float-star-1"><svg><title>One Star</title><use xlink:href="#star"></use></svg></label>
  
</div>
  
<fieldset class="button-group">
<legend class="label">Flex Stars</legend>

<div class="stars flex">
  <input class="star" type="radio" name="flex-star" id="flex-star-5" value="5" checked>
  <label for="flex-star-5"><svg><title>Five Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-star" id="flex-star-4" value="4">
  <label for="flex-star-4"><svg><title>Four Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-star" id="flex-star-3" value="3">
  <label for="flex-star-3"><svg><title>Three Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-star" id="flex-star-2" value="2">
  <label for="flex-star-2"><svg><title>Two Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-star" id="flex-star-1" value="1">
  <label for="flex-star-1"><svg><title>One Star</title><use xlink:href="#star"></use></svg></label>
  
</div>
</fieldset>
  
<fieldset class="button-group">
<legend class="label">Flex Order Stars</legend>

<div class="stars flex-order">
  <input class="star" type="radio" name="flex-order-star" id="flex-order-star-5" value="5">
  <label for="flex-order-star-5"><svg><title>Five Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-order-star" id="flex-order-star-4" value="4">
  <label for="flex-order-star-4"><svg><title>Four Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-order-star" id="flex-order-star-3" value="3">
  <label for="flex-order-star-3"><svg><title>Three Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-order-star" id="flex-order-star-2" value="2">
  <label for="flex-order-star-2"><svg><title>Two Stars</title><use xlink:href="#star"></use></svg></label>
  
  <input class="star" type="radio" name="flex-order-star" id="flex-order-star-1" value="1" checked>
  <label for="flex-order-star-1"><svg><title>One Star</title><use xlink:href="#star"></use></svg></label>
  
</div>
</fieldset>
</form>
.button-group {
  border: 0;
  margin: 0;
  padding: 0;
}

svg {
  max-width: 100%;
  max-height: 100%;
  fill: rgba(#000, 0.0625%);
  // stroke-width: 50;
  // stroke: #000;
}

legend {
  float: left;
  width: 10em;
  margin-right: 0.3em;
  font-weight: bold;
}

// Star Highlighting

label {
  display: block;
  cursor: pointer;
  width: 1em;
  height: 1em;
  // Simple hover state
  // &:hover svg,
  // &:hover ~ label svg {
  //   fill: orange;
  // }
}

.star {
  display: none;

  // Checked state
  &:checked ~ label svg {
    fill: gold;
  }

  // Hover state
  // Only when not checked
  &:not(:checked) + label:hover {
    svg,
    & ~ label svg {
      fill: orange;
    }
  }
}

.stars.ib {
  display: inline-block;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: bidi-override;
  label {
    display: inline-block;
    // Increase z-index on each element,
    // so negative margin dosen't affect hover
    position: relative;
    margin-right:-0.3em;
  }
}

.stars.float {
  display: inline-block;
  label {
    float: right;
  }
}

.stars.flex {
  display: flex;
  flex-flow: row-reverse;
  justify-content: flex-end;
}

.stars.flex-order {
  display: flex;
  
  input:nth-of-type(1) {
    &, & + label {
      order: 5;
    }
  }
  
  input:nth-of-type(2) {
    &, & + label {
      order: 4;
    }
  }
  
  input:nth-of-type(3) {
    &, & + label {
      order: 3;
    }
  }
  
  input:nth-of-type(4) {
    &, & + label {
      order: 2;
    }
  }
  
  input:nth-of-type(5) {
    &, & + label {
      order: 1;
    }
  }
  
}

// Global styles

:root{height:100%;display:flex}:root>*{margin:auto}
:root {font-size: 2em}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.