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-https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Advanced_styling#advanced_form_styling_2
link to advance form styling 1 code-https://jsfiddle.net/shivani0005/4fyhktvw/98/
link to advance form styling 2 code-https://jsfiddle.net/shivani0005/7L82busw/77/
link to advance form styling 3 code-https://jsfiddle.net/shivani0005/p7nt3yzb/70/

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(https://raw.githubusercontent.com/mdn/learning-area/main/html/forms/tasks/advanced-styling/search-24px.png) 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,
Michael

1 Like

Thank you for your feedback. I have updated the changes you suggested in task 1.
Here is the updated code-https://jsfiddle.net/shivani0005/4fyhktvw/120/

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: