Built with. 🔨
- HTML & CSS.
- JavaScript.
- Vite.
Features. ✨
- Display a custom error message if a rating is not selected when submitting.
New Things Learned. 🎓
- Custom styling radio buttons.
attr()
CSS function - Used to retrieve the value of an attribute of the selected element and use it in the stylesheet. - MDN- Next-sibling combinator (
+
) - Matches the second element only if it immediately follows the first element. - MDN
-
The main problem was how to make the radio buttons look like the design. After searching and playing around for sometime I had two methods.
-
Method 1: Visually-hide the radio button and style the label to look like the radio button. Based on the radio button's focused or checked state, the label can be styled.
.radio-button:focus-visible + .radio-label { outline: 0.125rem dotted var(--clr-primary-400); outline-offset: 0.125rem; } .radio-button:checked + .radio-label { color: var(--clr-primary-600); background-color: var(--clr-primary-400); }
-
Method 2: Visually-hide the label and style the radio button to get the desired look. With this approach I had to use an absolutely positioned pseudo element to display the number in the middle of each radio button.
.radio-button::after { content: attr(value); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
-
-
I ended up using the first method.
Any sort of feedback is appreciated.