プレビュー
HTML
<form>
<fieldset>
<legend>Rate</legend>
<label><input type="radio" name="rate" value="5" />5</label>
<label><input type="radio" name="rate" value="4" />4</label>
<label><input type="radio" name="rate" value="3" checked />3</label>
<label><input type="radio" name="rate" value="2" />2</label>
<label><input type="radio" name="rate" value="1" />1</label>
</fieldset>
</form>
CSS
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
fieldset {
position: relative;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 0.15rem;
margin: 0;
padding: 0;
border: 0;
color: var(--ink);
}
legend {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
label {
font-size: 0;
line-height: 1;
cursor: pointer;
}
input {
position: absolute;
opacity: 0;
}
label::before {
content: "★";
font-size: 1.35rem;
color: var(--line);
}
label:hover::before,
label:hover ~ label::before,
label:has(input:checked)::before,
label:has(input:checked) ~ label::before {
color: var(--accent);
}
Tailwind
<style>
:root {
--ink: #241c16;
--paper: #fffaf1;
--accent: #d4552b;
--accent-2: #4338ca;
--on-accent: #fff;
--muted: #6a6156;
--line: #d7ccb8;
--chip: #efe6d6;
}
legend {
clip-path: inset(50%);
}
label::before {
content: "★";
font-size: 1.35rem;
color: var(--line);
}
label:hover::before,
label:hover ~ label::before,
label:has(input:checked)::before,
label:has(input:checked) ~ label::before {
color: var(--accent);
}
</style>
<form>
<fieldset class="relative flex flex-row-reverse justify-end gap-[0.15rem] m-0 p-0 [border:0] text-[var(--ink)]">
<legend class="absolute w-[1px] h-[1px] overflow-hidden">Rate</legend>
<label class="text-[0] leading-[1] [cursor:pointer]"><input class="absolute opacity-[0]" type="radio" name="rate" value="5" />5</label>
<label class="text-[0] leading-[1] [cursor:pointer]"><input class="absolute opacity-[0]" type="radio" name="rate" value="4" />4</label>
<label class="text-[0] leading-[1] [cursor:pointer]"><input class="absolute opacity-[0]" type="radio" name="rate" value="3" checked />3</label>
<label class="text-[0] leading-[1] [cursor:pointer]"><input class="absolute opacity-[0]" type="radio" name="rate" value="2" />2</label>
<label class="text-[0] leading-[1] [cursor:pointer]"><input class="absolute opacity-[0]" type="radio" name="rate" value="1" />1</label>
</fieldset>
</form>