Hi everyone
I’m currently working on the Build a Job Application Form project and I’m stuck on this test:
Failed: 18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
I’m not sure why it’s failing because I believe I’m using :checked correctly.
.radio-group input[type="radio"]:checked + label {
color: green;
}
input[type="radio"]:checked + label {
color: green;
}
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="fullTime" value="fullTime" required>
<label for="fullTime" class="radio-grou1">Full-Time</label>
<input type="radio" name="availability" id="partTime" value="partTime" required>
<label for="partTime" class="radio-grou1">Part-Time</label>
</fieldset>
The label comes immediately after the input, so I thought input[type="radio"]:checked + label should work.
Could the issue be related to how the input and label are structured?
Do I need to wrap the <input> inside the <label> instead?
I’d really appreciate any guidance
Thank you!
dhess
February 25, 2026, 7:12pm
2
You have two selectors targeting the same thing. Have you tried removing one of them? If you need more help, please post a link to the challenge and all of your code, formatted as follows:
When you enter a code block into a forum post, please precede it with three backticks to make it easier to read and test with.
You can also use the “preformatted text” tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Yes i have tried to remove one selector, but still i am getting that error
Link of the challenge “https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-job-application-form/lab-job-application-form”
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">
<h1> Job Application Form </h1>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<label for="email"> Email </label>
<input type="email" id="email" name="email" required>
<label for="position">Position</label>
<select id="position" name="position" required>
<option value="" disabled selected>Choose Position</option>
<option value="job-1">Job 1</option>
<option value="job-2">Job 2</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="fullTime" value="fullTime" required>
<label for="fullTime" class="radio-grou1">Full-Time</label>
<input type="radio" name="availability" id="partTime" value="partTime" required>
<label for="partTime" class="radio-grou1">Part-Time</label>
</fieldset>
<label for="message">Why do you want this job?</label>
<textarea name="message" id="message" required></textarea>
<button class="submit-btn" type="submit"> Submit </button>
</form>
</div>
</body>
</html>
CSS:
input:focus, textarea:focus{
outline: none;
border: 2px solid midnightblue;
}
input:invalid, select:invalid, textarea:invalid{
border: 2px solid red;
}
input:valid, select:valid,textarea:valid{
border: 2px solid green;
}
button:hover{
background-color: grey;
}
.container{
background-color: whitesmoke;
box-shadow: 0 5px 15px black;
padding: 10px 20px;
margin: 20px auto;
border-radius: 10px;
width: 80%;
max-width:600px;
}
label:not(.radio-grou1){
font-size: 1.2rem;
display: block;
margin: 7px 0;
}
.radio-grou1{
font-size: 1.2rem;
margin: 7px 0;
transition: 0.3s ease;
}
input[type="text"],
input[type="email"]{
width: 95%;
border: 1px solid gray;
padding: 10px;
}
select{
width: 99%;
padding: 10px;
margin: 0px 0px 20px 0px;
}
textarea{
width: 98%;
height: 150px;
resize: none;
}
button{
cursor: pointer;
border: none;
padding: 12px 20px;
margin: 10px auto;
border-radius: 8px;
background-color: black;
color: whitesmoke;
}
h1{
text-align: center;
}
.radio-group input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid grey;
border-radius: 50%;
display: inline-block;
position: relative;
}
.radio-group input[type="radio"]:checked {
background-color: lightgreen;
border: 2px solid black;
box-shadow:0px 0px 5px lightgreen;
}
.radio-group input[type="radio"]:checked + label {
color: green;
}
input:first-of-type{
border-radius: 10px;
}
The error
ILM
February 26, 2026, 8:09am
4
try removing the transform property
Where exactly, cause i don’t have it.
ILM
February 26, 2026, 3:53pm
6
do you mean that this is not part of your code?
I have removed transition: 0.3s ease; and it has passed.
Thank you so much !
