Build a Job Application Form - Build a Job Application Form

Programming HTML-CSS
1

Tell us what’s happening:

I’ve tried everything to valid the step 12 but I don’t get where I am wrong. It says: “You should remove the selector for the :focus pseudo-class for input and textarea to also remove the default outline when focused.”
I’ve restarted it twice from the beginning, even making it as simple as possible, with no more than asked, but nothing change…
Thanks for your help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Application Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <form>
      <label for="name">Full Name</label>
      <input type="text" id="name" placeholder="Full Name" required>

      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Email Address" required>

      <label for="position">Position</label>
      <select id="position" required>
        <option value="" disabled selected>Select a position</option>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
        <option value="manager">Manager</option>
      </select>

      <fieldset class="radio-group">
        <legend>Availability</legend>
        <input type="radio" id="full-time" name="availability" value="full-time" required>
        <label for="full-time">Full-Time</label>
        <input type="radio" id="part-time" name="availability" value="part-time">
        <label for="part-time">Part-Time</label>
        <input type="radio" id="contract" name="availability" value="contract">
        <label for="contract">Contract</label>
      </fieldset>

      <label for="message">Message</label>
      <textarea id="message" placeholder="Enter your message here" required></textarea>

      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>

/* file: styles.css */
body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  margin: 0;
  padding: 40px 20px;
  background: linear-gradient(135deg, lightblue 0%, royalblue 100%);
  min-height: 100vh;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 40px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-weight: 600;
  color: black;
  margin-top: 12px;
  font-size: 14px;
}

input, select, textarea {
  margin-bottom: 8px;
  padding: 12px 14px;
  border: 2px solid lightgray;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus {
  border-color: royalblue;
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}

.radio-group {
  border: 2px solid lightgray;
  border-radius: 8px;
  padding: 16px;
  margin: 10px 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-group legend {
  font-weight: 600;
  color: black;
  padding: 0 8px;
  font-size: 14px;
}

.radio-group input[type="radio"] {
  margin: 0;
  padding: 0;
  width: auto;
  accent-color: royalblue;
}

.radio-group input[type="radio"]:checked {
  border-color: royalblue;
  background-color: royalblue;
  box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
}

.radio-group input[type="radio"]:checked + label {
  color: royalblue;
  font-weight: 700;
}

.radio-group label {
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

button {
  margin-top: 16px;
  padding: 14px;
  background: linear-gradient(135deg, lightblue 0%, royalblue 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.2s;
}

button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, royalblue 0%, darkblue 100%);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

input:first-of-type {
  border-radius: 12px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.