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;
andappearance: none;
. Every other value will use the native styling of the platform which we want to avoid here. -
line-height
tends to work better thanheight
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.
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.