Intermediate
A form that reacts with :has()
Using only CSS (no JavaScript), make the form react to its inputs:
- while the email input is invalid, its .field wrapper's border colour is #dc2626;
- the submit button has an opacity below 1 while the email is invalid or the terms box is unticked, and full opacity when both are fine.
What Check tests
- An empty email gives the field a red border
- A valid email removes the red border
- The button is dimmed while the email is invalid
- The button is dimmed while the terms box is unticked
- The button is fully visible when everything is fine
- Uses :has() and no JavaScript
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.