Assessment wanted for Test your skills: advanced styling

Hi :wave: Could I have an assessment of my work on Test your skills: Advanced styling?

Thank you in advance! :blush:

Task 1

Task 2
I tried this test in two ways as below, so I would appreciate if you could check both!
Also, when I used pseudo-class following the example, I couldn’t really figure out how to calculate the translate(x, y) position to centre the inner circle of radio buttons. :cry:
I could position the inner circle at the centre of the button completely out of luck… :sweat_smile: Could you please let me know how I should calculate this?

Pseudo-class and flexbox:

Grid:

Task 3
Is there any way I can hide the validation marks on page loads?

Test page

Hi @Risa

Great work on these tasks! :+1:

Here are some comments:

  • Task 1: Only recent Safari version (2022) know appearance without the -webkit- prefix. Better add it for now.
  • Task 1: line-height tends to work better than height for keeping a consistent height in which the input text is vertically-centered.
  • Task 1: You should also add :hover. Either a new style or by adding it where you used :focus.
  • Task 2: Nice styles for both radio button versions.
  • Task 2: Maybe set (v1) / increase (v2) the width of the labels to get nicely aligned, single line looks.
  • Task 3: Nice looking form and great code. :clap: No complains from my side.

I hope my comments are helpful.

See you,
Michael

1 Like

Hi @mikoMK,

Thank you so much for your feedback!
Yes your comments were very helpful, now my results look much better :blush:

About task 3, I am assuming that, when I’m only using built-in validations, I can’t turn off/hide the valid/invalid styling on page load… is my understanding correct? :slight_smile:

There’s an experimental pseudo class that will probably solve this problem: :blank. It’s not supported in any browser, yet.

input:invalid:not(:blank)

You could also use

input:invalid:not(:placeholder-shown)

which also seems to works with placeholder="".

1 Like

Hi @mikoMK

Thank you so much!
When :blank gets better browser support, I feel like it’s gonna be very useful! :blush:

I couldn’t think of using placeholder. I think it’s a very smart way to do similar thing to what :blank can do! :grinning:

Thank you!

2 Likes