I cant get the default outline step to pass and i am not sure what i may be doing wrong. This is the step that keps failing. (Add a :focus pseudo-class to the input and textarea elements to change their border color and remove the default outline when focused.)
<!-- 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>
<h1>Job Application Form</h1>
<div class="container">
<form>
<label for="name"> Full Name</label>
<br>
<input type="text" id="name" required>
<br>
<label for="email"> Email</label>
<br>
<input type="email" id="email" required>
<br>
<section>
<label for="position"> Desired Position</label>
<br>
<select id="position" name="position">
<option value="manager" required> Manager</option>
<option value="janitor" required> Janitor</option>
</select>
</section>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" id="full-time" name="availability">
<label for="full-time"> Full-Time</label>
<input type="radio" id="part-time" name="availability">
<label for="part-time"> Part-Time</label>
<input type="radio" id="weekends" name="availability">
<label for="weekends"> Weekends</label>
</fieldset>
<label for="message"> Message</label>
<br>
<textarea id="message" rows="8" required></textarea>
<br>
<button type="submit"> Submit Form</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body {
text-align: center;
outline: none;
padding: 10px;
margin: auto;
}
label {
font-size: 20px;
}
input, select, textarea {
outline:none;
}
input:focus, textarea:focus {
border-color: grey;
}
input:invalid, select:invalid, textarea:invalid {
border: 2px solid red;
}
input:valid, select:valid, textarea:valid {
border: 2px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked {
border-color: green;
background-color: white;
box-shadow: 5px 10px 10px black;
}
.radio-group input[type="radio"]:checked + label {
color: purple;
}
input:first-of-type {
color: green;
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/150 Version/11.1.1 Safari/605.1.15
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
dhess
July 12, 2026, 5:38pm
2
Welcome to the forum @Britlanay28 ,
Where are you removing the default outline in this selector?
Happy coding
body {
text-align: center;
outline: none;
padding: 10px;
margin: auto;
}
label {
font-size: 20px;
}
input, select, textarea {
outline:none;
}
input:focus, textarea:focus {
border-color: grey;
outline: 2px solid black;
}
input:invalid, select:invalid, textarea:invalid {
border: 2px solid red;
}
input:valid, select:valid, textarea:valid {
border: 2px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input\[type="radio"\]:checked {
border-color: green;
background-color: white;
box-shadow: 5px 10px 10px black;
}
.radio-group input\[type="radio"\]:checked + label {
color: purple;
}
input:first-of-type {
color: green;
}
There are two ways you can format your code to make it easier to read and test:
After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post .
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
dhess
July 13, 2026, 12:30pm
5
Add a :focus pseudo-class to the input and textarea elements to change their border color and remove the default outline when focused.
Are you implementing this user story correctly?
Were you asked to remove an outline from these elements?
Were you asked to remove an outline from the body element?
Please be careful to implement the user stories exactly as asked.
Happy coding
body {
text-align: center;
padding: 10px;
margin: auto;
}
label {
font-size: 20px;
}
input:focus, textarea:focus {
border-color: grey;
outline: none;
background-color: aqua;
}
input:invalid, select:invalid, textarea:invalid {
border: 2px solid red;
}
input:valid, select:valid, textarea:valid {
border: 2px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input\[type="radio"\]:checked {
border-color: green;
background-color: white;
box-shadow: 5px 10px 10px black;
}
.radio-group input\[type="radio"\]:checked + label {
color: purple;
}
input:first-of-type {
color: green;
}
I tried to correct it but it is still saying failed on that step. I cannot figure out what I might be missing!
There are two ways you can format your code to make it easier to read and test:
After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post .
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
dhess
July 13, 2026, 7:27pm
8
Britlanay28:
background-color: aqua;
Were you asked to do this.? As I advised you earlier:
And, in the future, please format your updated code as @pkdvalis had to advise you to do TWICE.
I apologize. I’m new to this so forgive me for not completely understanding what was being asked. Thanks for trying to guide me.
body {
text-align: center;
padding: 10px;
margin: auto;
}
label {
font-size: 20px;
}
input:focus, textarea:focus {
border-color: grey;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border: 2px solid red;
}
input:valid, select:valid, textarea:valid {
border: 2px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked {
border-color: green;
background-color: white;
box-shadow: 5px 10px 10px black;
}
.radio-group input[type="radio"]:checked + label {
color: purple;
}
input:first-of-type {
color: green;
}
I’m not sure if I posted that correctly. I’m trying to fix what has been asked of me.
