You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
having an issue with this
<!-- 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>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<div class="container">
<form>
<label for="name">name</label>
<input type="text" id="name"/><br/>
<label for="email">email</label>
<input type="email" id="email"/><br/>
<label for="position">position</label>
<select id="position">
<option id="intern">intern</option>
<option id="seniorAdminClerk">senior admin clerk</option>
<option id="CES">CES</option>
<option id="director">director</option>
<option id="chiefDirector">chief director</option>
</select>
<fieldset class="radio-group">
<legend id="availability">availability</legend>
<label for="full-time">full-time</label>
<input type="radio" id="full-time" name="availability"/><br/>
<label for="part-time" >part-time</label>
<input type="radio" id="part-time" name="availability"/><br/>
</fieldset>
<label for="message">message</label>
<textarea id="message">
</textarea>
<button type="submit">submit
</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
input:focus, textarea:focus {
border: 1px solid yellow;
}
input:invalid, select:invalid, textarea:invalid {
border: 1px solid red;
}
input:valid, select:valid, textarea:valid {
border: 1px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked {
border: 1px solid orange;
background-color: purple;
box-shadow: 5px 5px 10px gray;
color: orange;
}
.radio-option input[type="radio"]:checked + label {
color: blue;
}
input:first-of-type {
border-radius: 2px;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36 Edg/138.0.0.0
Build a Job Application Form - Build a Job Application Form
ILM
September 2, 2025, 2:44pm
2
what part of your code is implementint that requirement?
.radio-option input[type=“radio”]:checked + label { color: blue; }
ILM
September 2, 2025, 2:50pm
4
can you describe what the + combinator does?
The labels for your radio buttons are to the left of the radio button.
I think this is pretty unusual because if the options are different lengths it will mess up the alignment.
It’s more common for the labels to be to the left, correct?
Doesn’t that look better?
I’m looking for the fCC lesson about this to see if it matches.
Look at this example:https://www.w3schools.com/tags/tag_label.asp
and thishttps://html.form.guide/snippets/html-radio-button-label/
and thishttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio
Documenting this for later:
This review has it wrong:
https://www.freecodecamp.org/learn/full-stack-developer/review-html-tables-and-forms/review-html-tables-and-forms
<!-- Radio group -->
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<label for="yes-option">Yes</label>
<input id="yes-option" type="radio" name="hotel-stay" value="yes" />
<label for="no-option">No</label>
<input id="no-option" type="radio" name="hotel-stay" value="no" />
</fieldset>
This goes against this guideline:
https://www.w3.org/TR/WCAG20-TECHS/G162.html
Labels for radio buttons and checkboxes are positioned after the field.
It’s correct in this example project:
https://www.freecodecamp.org/learn/full-stack-developer/lab-survey-form/build-a-survey-form
This is the big one where it’s really taught:
https://www.freecodecamp.org/learn/full-stack-developer/workshop-hotel-feedback-form/step-19
It’s correct in the example:
<input type="radio" id="yes" name="first-time">
<label for="yes">Yes</label>
<input type="radio" id="no" name="first-time">
<label for="no">No</label>
But the instructions guide it to be backwards:
add a label element with the text Yes and a for attribute set to “yes-option”.
Below your label element, add a radio button with the id set to “yes-option”, and the name attribute set to “hotel-stay”.
Later when it’s done this way in this lab, the CSS does not work correctly. There is no CSS selector to select the previous element in this way?
ILM
September 2, 2025, 3:45pm
7
there is :has()label:has(+ input:checked)
but if it’s against guidelines it should be changed in the previous material
I did notice that in my research, and I guess has() has been taught by this point.
I’m not sure if that’s the expected solution here? Even our solution code follows the input/label scheme and uses the + selector.
It could be done using has() ? But as mentioned it is a guideline
I mainly wanted to find out why this error keeps coming up again and again.
ILM
September 2, 2025, 3:57pm
9
if you do nested input, has is the only way I can think to make it work
thank you for the issue documenting this
I was curious about that. I found this legacy lesson which teaches nested:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons
But the new curriculum seems to teach to link them with for as two not nested elements.
It would make sense that using input first and then label would work together with the + combo.
thank you but putting the radio buttons to the left and label to the right has not sorted the issue with user story 18
availability
<fieldset class="radio-group">
<legend id="availability">availability</legend>
<input type="radio" id="full-time" name="availability"/><label for="full-time">full-time</label><br/>
<input type="radio" id="part-time" name="availability"/><label for="part-time" >part-time</label><br/>
part-time
that’s the main change but I still have the same error
ILM
September 3, 2025, 9:30am
15
please post your full updated code so that we can test your changes
how do i share the full code as its done automatically when you first ask a question?
Just as you did above but all of it.
It’s helpful if you can put html and css into separate blocks.
<!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>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<div class="container">
<form>
<label for="name">name</label>
<input type="text" id="name"/><br/>
<label for="email">email</label>
<input type="email" id="email"/><br/>
<label for="position">position</label>
<select id="position">
<option id="intern">intern</option>
<option id="seniorAdminClerk">senior admin clerk</option>
<option id="CES">CES</option>
<option id="director">director</option>
<option id="chiefDirector">chief director</option>
</select>
<fieldset class="radio-group">
<legend id="availability">availability</legend>
<input type="radio" id="full-time" name="availability"/><label for="full-time">full-time</label><br/>
<input type="radio" id="part-time" name="availability"/><label for="part-time" >part-time</label><br/>
</fieldset>
<label for="message">message</label>
<textarea id="message">
</textarea>
<button type="submit">submit
</button>
</form>
</div>
</body>
</html>
css
input:focus, textarea:focus {
border: 1px solid yellow;
}
input:invalid, select:invalid, textarea:invalid {
border: 1px solid red;
}
input:valid, select:valid, textarea:valid {
border: 1px solid green;
}
button:hover {
background-color: blue;
}
.radio-group input[type="radio"]:checked {
border: 1px solid orange;
background-color: purple;
box-shadow: 5px 5px 10px gray;
color: orange;
}
.radio-option input[type="radio"]:checked + label {
color: blue;
}
input:first-of-type {
border-radius: 2px;
}
1 Like
Thanks
So, this is not working, correct?
.radio-option input[type="radio"]:checked + label {
color: blue;
}
The color of your labels is not changing. It’s very specific, maybe it’s too specific.
Is there a way you can simplify it that still implements the instruction?
Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
yeah, thats the piece of code that’s not working. Please if you know of a simpler way to select a checked label please let me know.
