Design a Registration Form - Step 58

HTML-CSS
1

Tell us what’s happening:

I am on Step 58 which says “Using another attribute selector, style the input with a type of file to be the same padding as the other input elements.” I am confused on what exactly I am supposed to do in this step.
Thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Registration Form</h1>
  <p>Please fill out this form with the required information</p>
  <form method="post" action='https://register-demo.freecodecamp.org'>
    <fieldset>
      <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
      <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
      <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
      <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
    </fieldset>
    <fieldset>
      <legend>Account type (required)</legend>
      <label for="personal-account"><input id="personal-account" type="radio" name="account-type" value="personal" class="inline" checked /> Personal</label>
      <label for="business-account"><input id="business-account" type="radio" name="account-type" value="business" class="inline" /> Business</label>
    </fieldset>
    <fieldset>
      <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
      <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
      <label for="referrer">How did you hear about us?
        <select id="referrer" name="referrer">
          <option value="">(select one)</option>
          <option value="1">freeCodeCamp News</option>
          <option value="2">freeCodeCamp YouTube Channel</option>
          <option value="3">freeCodeCamp Forum</option>
          <option value="4">Other</option>
        </select>
      </label>
      <label for="bio">Provide a bio:
        <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
      </label>
    </fieldset>
    <a href="https://www.freecodecamp.org/news/terms-of-service">Read our terms and conditions</a>
    <label for="terms-and-conditions">
      <input name="terms" id="terms-and-conditions" type="checkbox" required />
      I accept the terms and conditions
    </label>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

/* file: styles.css */
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}


/* User Editable Region */

input[name="file"] {
  margin: 10px;
}

/* User Editable Region */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Design a Registration Form - Step 58

2

In your code, you used margin: 10px;. Is margin the same thing as padding?

3

I am getting this message when I check the code “should use an attribute selector to style the input element” no matter wether I have used margin or padding.

4

The messages from the tests don’t always reflect what exactly is wrong. You should review the User Story.

When you are sure the User Story is implemented accurately, please share your updated code.

5

How do I use the User Story?

6

This is a workshop and so does not have User Stories, my mistake.

Please share your updated code.

7 
input[name="file"] {

  padding: 10px;

}input[name="file"] {

  padding: 10px;

}

Here is the code that I am using

8

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

9

You have the selector twice here. Was that a mistake in pasting the code?

What is the padding of the other input elements?

Why have you chosen 10px?

10 
input[name="file"] {

padding: 10px;

}

I accidently pasted it twice. The only padding that is on my page is this

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

so I just put 10px as my value.

11

Thank you for your help. I figured out what i did wrong . I was using

input[name="file"] {
padding: 10px;

}

and I need to use type instead of name

1 Like
12

Good catch, I didn’t notice that part