I am at my wit’s end. I cannot get No. 12 right. Whatever I do, it doesn’t remove the default outline when focused. Can someone help me please.
<!-- 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>
<main>
<div class="container">
<form>
<label for="name"> Full Name</label>
<input type="text" id="name"/>
<br>
<label for="email">Email</label>
<input type="email" id="email"/>
<br>
<select id="position">
<option value="Designer">Designer</option>
<option value="Manager">Manager</option>
<option value="Unemployed">Unemployed</option>
</select>
<br>
<fieldset class="radio-group" name="availability">
<legend for="availability">Availability</legend>
<input type="radio" name="availability" id="part-time"><label for="part-time">Part Time</label>
<input type="radio" name="availability" id="full-time"><label for="full-time">Full Time</label>
</fieldset>
<br>
<textarea id="message">
</textarea>
<br>
<button type="submit">Submit</button>
</form>
</div>
</main>
</body>
</html>
/* file: styles.css */
body{
background-color: green;
}
form{
background-color: white;
font-family: Arial; sans-serif;
border-radius: 6px;
margin: 20px;
padding: 40px;
text-align: center;
width: 70%;
outline: black;
}
input:valid,
select:valid,
textarea:valid{
border-color: green;
}
input:invalid, select:invalid, textarea:invalid{
border-color: red;
}
input:focus, textarea:focus{
border-color: pink;
outline: none;
}
button:hover{
background-color: #db0812;
}
.radio-group input[type="radio"]{
border-color: #003973;
background-color: purple; box-shadow: 0 1px rgb(180, 180, 6);
}
.radio-group input[type="radio"]:checked{
border-color: brown;
background-color: pink;
box-shadow: 0 1px rgb(180, 180, 6);
}
.radio-group input[type="radio"]:checked + label {
color: blue;
}
input:first-of-type{
border-radius: 16px;
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 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
Welcome to the forum @tim.krnr
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.
Happy coding
I do not understand, why I can’t get Number 12 right. I put outline always in there and it just doesn’t work. I have been at it all day.
<!-- 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>
<main>
<div class="container">
<form>
<label for="name"> Full Name</label>
<input type="text" id="name"/>
<br>
<label for="email">Email</label>
<input type="email" id="email"/>
<br>
<select id="position">
<option value="Designer">Designer</option>
<option value="Manager">Manager</option>
<option value="Unemployed">Unemployed</option>
</select>
<br>
<fieldset class="radio-group" name="availability">
<legend for="availability">Availability</legend>
<input type="radio" name="availability" id="part-time"><label for="part-time">Part Time</label>
<input type="radio" name="availability" id="full-time"><label for="full-time">Full Time</label>
</fieldset>
<br>
<textarea id="message">
</textarea>
<br>
<button type="submit">Submit</button>
</form>
</div>
</main>
</body>
</html>
/* file: styles.css */
body{
background-color: green;
}
form{
background-color: white;
font-family: Arial; sans-serif;
border-radius: 6px;
margin: 20px;
padding: 40px;
text-align: center;
width: 70%;
outline: black;
}
input:valid,
select:valid,
textarea:valid{
border-color: green;
}
input:invalid, select:invalid, textarea:invalid{
border-color: red;
}
input:focus, textarea:focus{
border-color: pink;
outline: none;
}
button:hover{
background-color: #db0812;
}
.radio-group input[type="radio"]{
border-color: #003973;
background-color: purple; box-shadow: 0 1px rgb(180, 180, 6);
}
.radio-group input[type="radio"]:checked{
border-color: brown;
background-color: pink;
box-shadow: 0 1px rgb(180, 180, 6);
}
.radio-group input[type="radio"]:checked + label {
color: blue;
}
input:first-of-type{
border-radius: 16px;
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 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
Hey there, thank you so much for the answer but it still does not work at all, whatever I do, nothing works.
dhess
May 18, 2026, 8:32pm
5
Hi @tim.krnr ,
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.
Happy coding!
dhess
May 18, 2026, 8:35pm
6
Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.
The duplicate topic has been unlisted.
Thank you.