Learn HTML Forms by Building a Registration Form - Step 47

Tell us what’s happening:

Idk what I am doing wrong. I tried adding the border-bottom to the first fieldset, but that didn’t work. it just kept saying to add border-bottom of 3px solid #3b3b4f to fieldset. I looked at other posts and they all have completely different answers with a last-of-type. The are also showing rgb for the color tool. Mine doesn’t say anything about rgb. What am I doing wrong?

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" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> 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>
      <label for="terms-and-conditions">
        <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
      </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;
}


/* User Editable Region */

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

/* User Editable Region */


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

Your browser information:

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

Challenge Information:

Learn HTML Forms by Building a Registration Form - Step 47

To give the fieldset elements a bit of separation, select them

What made you add “last of type”? The instructions simply mention " the fieldset elements"

The step may have been changed updated since other forum posts.

I added “last of type” because that’s all I saw in the other posts. Besides that I have added the border-bottom to the fieldset and put the given codes that go after and it still says it’s wrong. I am not sure what it wants me to do

All you have to do is add -bottom to the word border : followed by 3px solid #3…4f on code line 24 of the fieldset like so
removed by mod
Restart only that lesson so you can restart with no other error!

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Please share your updated code

1 Like

How do I share my code here without opening a new post?

That’s what I literally did the very first time and it didn’t work. That was before I tried what the other posts said.

I think you might have an order problem. Remember that CSS rules are applied first to last. You should put more specific rules at the bottom and more general rules above. Otherwise the more general rule will overwrite the more specific rule.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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

Like this? This is what I have as my answer and it still says it’s wrong.

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

This is what I have written for the code. Are you saying I need to write it under the padding?

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

Okay, I did what Pkdvalis said and it works now. It really was just an order issue.

Will Do! Next time will provide hints for them to figure a fix solution. Biggest Apologies!

Happy Coding!