Learn HTML Forms by Building a Registration Form - Step 61

Q1. What is another attribute selector?

The last paragraph of the question 61 says "Using another attribute selector, style the input with a type of file.....
Is it
input[type=“file”] {
or something else?
I tried the class attribute by adding class=“file” inside to use the .file {} in css, but I feel like using the class attribute is not what is asked in this question. I’m very confused…

Q2. How much padding should I add to the upload button? and what is "the other ‘input’ elements?
The question "Using another attribute selector, style the input with a type of file ====> to be the same “padding” as “the other input elements”.
Does “style it to be the same padding as the other input elements” mean
style it to be
padding-bottom: 1px;
padding-right: 2px;
padding-left: 2px;
padding-top: 1px;
padding: 1px 2px 2px 1px;
to make the “file” to have the same padding as the other four inputs in the first “fieldset” have by default?

or am I taking the question wrong? Is the question asking me to do different thing in the first place?

I left my code so far for your reference.

Thank you in advance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
        <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>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
        <label for="terms-and-conditions" name="terms-and-conditions">
          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
        <label for="profile-picture">Upload a profile picture: <input class="file" 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>
        <label for="bio">Provide a bio:
          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
      <input type="submit" value="Submit" />
/* 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;

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;

  input[type=file] {
  padding: 1px 2px 2px 1px;

Your browser information:

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

Challenge: Learn HTML Forms by Building a Registration Form - Step 61

Link to the challenge:

Yes that is a selector that includes an attribute selector .

This is the one used in the other input selector, so just write the same code again

You are missing the } which closes the input selector for type submit

I truly appreciate your reply. Thank you very much!

1 Like

Btw, the step directions say

By default, a padding of 1px 2px is given to input elements you can type in.

So that means you can use

padding: 1px 2px;

As that will assign 1px to the top and bottom and 2px to the left and right.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.