Assessment wanted for Advanced form styling 1,2 and 3 skill test

I have completed this advance form styling 1,2 and 3
link to the task-
link to advance form styling 1 code-
link to advance form styling 2 code-
link to advance form styling 3 code-

Hi @S005

Well done! Here are some comments:

Task 1

  • When we style a field ourselves we should just set -webkit-appearance: none; and appearance: none;. Every other value will use the native styling of the platform which we want to avoid here.
  • line-height tends to work better than height for keeping a consistent height in which the input text is vertically-centered.
  • You need to remove outline: none;, since we provide our own with :focus.
  • I can’t see the icon. It’s probably because of the positioning. A better solution could be this:
div {
  width: 36px;
  height: 24px;
  background: url( no-repeat center;
  background-size: 18px;

form {
  display: flex;
  align-items: center;

Task 2 and 3

Both tasks look very cool. Great stylings! Nothing to complain from my side. :slightly_smiling_face:

Have a nice day,

1 Like

Thank you for your feedback. I have updated the changes you suggested in task 1.
Here is the updated code-

Nice improvements!

You need to remove appearance: searchfield; because it otherwise overwrites the none value from the line above. Everything else looks fine now. :+1: