<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.