Having some troubles on step 18 which goes as follows:
You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected
Here’s my codes so far:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rfl="spreadsheet" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<header><h1>Job Application Form</h1></header>
<div class="container">
<form>
<label>Full Name:
<input
class="name"
type="text"
id="name">
</label>
</input>
<label>Email:
<input
class="email"
type="email"
id="email">
</label>
</input>
<label>Position: </label>
<select id="position">
<option>Wheelchair Agent</option>
<option>Wheelchair Lead</option>
<option>Wheelchair Dispatcher</option>
<option>Wheelchair Supervisor</option>
</select>
<label id="radio group">Choose your work time: </label>
<fieldset class="radio-group" name="availabilty">
<label id="full-time">Full-Time
<input
type="radio"
name="availability"
value="full-time"
required>
</label>
</input>
<label id="part-time">Part-Time
<input
type="radio"
name="availability"
value="part-time"
required>
</label>
</input>
<label id="contract">Contract
<input
type="radio"
name="availability"
value="contract">
</label>
</input>
</fieldset>
<label class="message">Why do you want this position?</label>
<textarea id="message">
</textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
styles.css
.radio-group {
margin-bottom: 15px;
}
input:focus, textarea:focus {
border-color:teal;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked{
border-color: gray;
background-color: silver;
box-shadow: 0 0 5px;
}
.radio-group input [type="radio"]:checked + label {
color: blue;
}
input:first-of-type {
border-radius: 5px;
}
Any assistance will be helpful. Just keep in mind that I’m learning slowly and I will need some extra patience. Thank you.
1 Like
Can you please share a link to the challenge too?
@faust.levity Sure, here it is:
Slow learning is the best, because what you learned, sticks better.
There is two thing you have to do with that challenge:
There is a hint for one.
And you used the for attribute in your label elements. Do you know what is that for?
I have tried the hints, but they’ve only linked to ones asking for step 15 and other steps prior so not much help because I couldn’t see anything concrete.
As for the for attribute, I am looking in it in multiple places and I’m struggling to see where it’s at. Maybe it’s because my glasses are off, but can you tell me where it’s at in the code?
Uhm, sorry, I had a different html code loaded.
for Attribute is used for assosicate elements to each other. It´s also good for accessibility, if the user clicks on a Label and the associated Input become checked.
How do you tried that hint I have send you? Can you may share that piece of code you changed based on it?
I have not tried it yet, so I can see what I can do. I am unsure of how to apply so I will need to recheck this.
dhess
January 11, 2026, 9:00pm
8
To associate a radio button to a label, you need to give the radio button a unique id and reference that id as the value of the label’s for attribute.
There are several examples here: - HTML | MDN
1 Like
hola, no puedo pegar el token de examen en la app de escritorio, hago click pero no pega nada
Ok, so I run into a similar problem, so I’ll link both codes in again.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rfl="spreadsheet" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<header><h1>Job Application Form</h1></header>
<div class="container">
<form>
<label>Full Name:
<input
class="name"
type="text"
id="name">
</label>
</input>
<label>Email:
<input
class="email"
type="email"
id="email">
</label>
</input>
<label>Position: </label>
<select id="position">
<option>Wheelchair Agent</option>
<option>Wheelchair Lead</option>
<option>Wheelchair Dispatcher</option>
<option>Wheelchair Supervisor</option>
</select>
<label id="radio group" for="radio-group">Choose your work time: </label>
<fieldset class="radio-group" name="availabilty">
<div>
<label
id="full-time"
class="radio"
for="full-time">
Full-Time
<input
type="radio"
id="full-time"
name="availability"
value="full-time"
required />
</label>
<label
id="part-time"
class="radio"
for="part-time" />
Part-Time
<input
type="radio"
id="full-time"
name="availability"
value="part-time"
required>
</label>
<label
id="contract"
class="radio"
for="contract">
Contract
<input
type="radio"
id="contract"
name="availability"
value="contract" />
</label>
</div>
</fieldset>
<label class="message">Why do you want this position?</label>
<textarea id="message">
</textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
styles.css
.radio-group {
margin-bottom: 15px;
}
input:focus, textarea:focus {
border-color:teal;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked{
border-color: gray;
background-color: silver;
box-shadow: 0 0 5px;
}
.radio-group input [type="radio"]:checked + label {
color: blue;
}
input:first-of-type {
border-radius: 5px;
}
dhess
January 11, 2026, 10:02pm
11
an id is unique. you can’t use the same id in more than one html element.
I took the id off of the label ones, didn’t work.
dhess
January 11, 2026, 10:23pm
13
Please post your updated code.
Since it’s just the first file that’s been changed, I’ll be posting that:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rfl="spreadsheet" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<header><h1>Job Application Form</h1></header>
<div class="container">
<form>
<label>Full Name:
<input
class="name"
type="text"
id="name">
</label>
</input>
<label>Email:
<input
class="email"
type="email"
id="email">
</label>
</input>
<label>Position: </label>
<select id="position">
<option>Wheelchair Agent</option>
<option>Wheelchair Lead</option>
<option>Wheelchair Dispatcher</option>
<option>Wheelchair Supervisor</option>
</select>
<label id="radio group" for="radio-group">Choose your work time: </label>
<fieldset class="radio-group" name="availabilty">
<div>
<label
class="radio"
for="full-time">
Full-Time
<input
type="radio"
id="full-time"
name="availability"
value="full-time"
required />
</label>
<label
class="radio"
for="part-time" />
Part-Time
<input
type="radio"
id="full-time"
name="availability"
value="part-time"
required>
</label>
<label
class="radio"
for="contract">
Contract
<input
type="radio"
id="contract"
name="availability"
value="contract" />
</label>
</div>
</fieldset>
<label class="message">Why do you want this position?</label>
<textarea id="message">
</textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
In your CSS:
.radio-group input [type="radio"]:checked + label {
color: blue;
}
has a typo. CSS selectors are sensitive for space, but I suggest two ways to pass the tests:
You currently use the + (next-sibling combinator), wich selects the very first Label after the input, but in your HTML the input and label elements are mixed together.
You have to orginise your input and label elements correctly.
fix the mentioned typo in CSS.
or
You use the :has() pseudo to rewrite the selector in the CSS, I mentioned before.
Either way, the “Part Time” label wasn´t associated correctly with it´s input.
dhess
January 11, 2026, 11:17pm
16
this syntax is wrong. input is a void element that does not require a closing tag. and where is the for attribute in the label tag to connect it to the radio button? and, typically, developers put the radio button before its label. if you change the order, your css should work.
Followed this advice and it actually worked. Thank you so much. I keep mixing up certain things as I’m very beginner level. I literally started a few days ago and in a mentorship program to help assist.
1 Like
freeCodeCamp and this forum are for beginners, so don’t feel the need to explain.
If you have questions about anything, ask away.
1 Like