Notation par étoiles avec :has() et ~
Notation par étoiles avec :has() et ~
HTML
index.html <form>
<label>★ <input type="radio" name="rate" /></label>
<label>★ <input type="radio" name="rate" /></label>
<label>★ <input type="radio" name="rate" /></label>
<label>★ <input type="radio" name="rate" checked /></label>
<label>★ <input type="radio" name="rate" /></label>
<label>★ <input type="radio" name="rate" /></label>
</form>
CSS
style.css @layer demo {
label {
color: grey;
text-shadow: 0 2px 5px black;
cursor: pointer;
&:hover {
color: red;
}
> input {
position: absolute;
appearance: none;
margin: 0;
}
}
label:has(~ label > input:checked),
label:has(input:checked) {
color: #ffb300;
&:hover {
color: red;
}
}
}
@layer demoStyles {
body {
background: hsl(0 0% 10%);
}
form {
background-image: linear-gradient(45deg, black, #222);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
padding: 2rem;
border-radius: 20px;
font-size: 3rem;
border: solid 1px white;
}
}