Assessment wanted for Advanced form styling 3 skill test

Hello, could someone please assess this?

Link to my code: https://jsfiddle.net/Keyboardguy/8poyakhg/11/

Link to task: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling#advanced_form_styling_3

Thanks, Keyboardguy

Hi @Keyboardguy

Well done! :tada:

One thing to consider (It’s okay in this specific form):
Initially a field like “First name” is required and invalid (because it’s empty), but we only see the “Required”. That’s because both selector have the same specificity and the second rule overwrites the first one. You could separate them into span::before and span::after and then place them in different spots. For example replacing the valid/invalid indicator with a checkmark/cross after the input field.

Have a nice day,
Michael

Hello,

Thanks for the feedback! I see what you mean - after a couple of edits to my code, I’ve managed to add the checkmark/cross invalid styling.

https://jsfiddle.net/Keyboardguy/8poyakhg/23/

Thanks, Keyboardguy

1 Like

Wow, that’s some nice work you’ve done. :+1:
Looks great.

You can even remove top, left and font-size from input + span::after, because you define them in both of the following rules.

Keep up the great work,
Michael