Help request for Advanced Form Styling 1 Skill Test

MDN Learn
#1

Screen Shot 2022-06-08 at 15.37.04
Screen Shot 2022-06-08 at 15.37.041254×1266 170 KB

I’m more confused about the specific step-by-steps.

For no.1 and 2, this is what’s being asked right?

input {
        width: 750px;     /* no. 1 */
        height: 40px;     /* no. 1 */
        padding: 0px;   /* no. 1 */
        border-color: red;  /* no. 1 */
        -webkit-appearance: none;    /* no. 2 */
        appearance: none;    /* no. 2 */
        }

I’m not sure what feature is being referred to by no. 3:

you’ll need to add back one of the features it was providing, to keep the same look and feel we originally had. How do you do this?

I’m checking for differences with and without appearance:none and I’m not seeing any differences.

For no. 5, is the problem that, from a usability standpoint, it can be difficult for a user to see whether they have already clicked the search bar without the outline?

Thanks in advance!

#2

Hey @Benedict_Tan and welcome to the community!

What questions one and two are asking is that you create a search input field that looks the same in terms of width, height, padding, and border across different browsers and operating systems.

To test this, you can use the link to the Codepen you created and sign up for a free account with BrowserStack. This will allow you to do the cross-browser testing the assessment is asking for.

Item three refers to the use of appearance: none (and the -webkit-appearance: none; variant). When this is added to an input field, for example, any styling that the browser would provide is removed. This gives you a blank canvas (so to speak) from where you can start adding the styling you want.

Some browser and operating system combinations will show a much bigger difference between the default and with appearance: none; so experiment with different combinations using Browserstack.

Item five refers to one of the styling features that is removed by appearance: none. The assessment then asks what you would do to fix the situation. Hope this helps! Feel free to ask additional questions should you have any.

–
Schalk
Staff Community Manager - MDN Web Docs

3 Likes
#3

Thank you very much! Definitely will start using BrowserStack.

1 Like