Im unable to pass the test 17 which says “You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”
<fieldset class="radio-group">
<legend>Availability</legend>
<label for="full-time">
<input type="radio" name="availability" id="full-time" value="full-time">Full Time
</label>
<label for="part-time">
<input type="radio" name="availability" id="part-time" value="part-time">Part Time
</label>
</fieldset><br>
<label for="message">Reason for application</label>
<textarea id="message" name="message" placeholder="write your motivations" cols="40" rows="20" required></textarea><br>
<button type="submit" id="submit">Submit Application</button>
</form>
</div>
</main>
</body>
</html>
/* file: styles.css */
body {
background: pink;
font-family: sans-serif;
}
form label {
display: block;
margin-top:10px;
margin-bottom: 10px;
}
input:focus, textarea:focus { border-color: blue;}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button {
display: inline-block;
width: 100%;
padding: 12px;
border-radius: 5px;
}
button:hover {
background-color: magenta;
}
.radio-group input[type="radio"]:checked {
color: magenta;
border-color: magenta;
background-color: lightpink;
box-shadow: 0 0 2px magenta;
}
input:first-of-type {
border-radius: 10px;
}
form select {
margin-bottom: 20px;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Build a Job Application Form - Build a Job Application Form
Would you re-post your HTML? It appears to be incomplete.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Job Application Form</title>
</head>
<body>
<main>
<div class="container">
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required><br>
<label for="position">Position:</label>
<select name="position" id="position" required>
<option value="">--Select--</option>
<option value="designer">Designer</option>
<option value="developer">Developer</option>
<option value="writer">Writer</option>
<option value="marketer">Marketer</option>
</select><br>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="full-time" value="full-time">
<label for="full-time">Full Time</label>
<input type="radio" name="availability" id="part-time" value="part-time">
<label for="part-time">Part Time</label>
</fieldset>
<label for="message">Reason for application</label>
<textarea id="message" name="message" placeholder="write your motivations" cols="40" rows="20" required></textarea><br>
<button type="submit" id="submit">Submit Application</button>
</form>
</div>
</main>
</body>
</html>
ILM
June 9, 2025, 2:07pm
5
what part of your code do you think satisfies that test?
Glad to see you changed the radio/label syntax. Now that the radio field is before the label, you need to add a selector to get at the label. Can you think of how you would write that?
i tried .radio-group input[type="radio"]:checked+label and even .radio-group input[type="radio"]:checked ~ label but neither seem to be working
The first selector there worked for me when I tried your code.
Step 17 still shows failed when i try the + selector
Would you post your updated CSS, please. Nothing has changed on your HTML since you last posted, right?
HTML code is the same
body {
background: pink;
font-family: sans-serif;
}
form label {
display: block;
margin-top:10px;
margin-bottom: 10px;
}
input:focus, textarea:focus { border-color: blue;}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button {
display: inline-block;
width: 100%;
padding: 12px;
border-radius: 5px;
}
button:hover {
background-color: magenta;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
.radio-group input[type="radio"]:checked+label {
border: 2px solid #0077cc;
background-color: #e0f0ff;
box-shadow: 0 0 5px #0077cc;
}
.radio-group input[type="radio"]:checked {
border: 2px solid #0077cc;
background-color: #e0f0ff;
box-shadow: 0 0 5px #0077cc;
}
input:first-of-type {
border-radius: 10px;
}
form select {
margin-bottom: 20px;
}
It works correctly on the preview, however, it does not pass the test on the module.
Okay, I see the problem. Look again at User Story #14 and #15 ? Are both styles targeting the same element?
I’m sorry, im unable to understand the problem
What element are you asked to style in User Story 14?
oh i apologize, i was looking at the tests! I will cross check it and get back to you. Just a moment
The User Story 14 asks to style the button which is selected and the 15th one asks to style the label associated to the button. They seem to be working alright in the preview
…to change the text color of the associated label…
Are you sure? Should the button label have the same style as the button?
Oh got my mistake there! I changed the color of the associated label to green. Thank you for that!
Here is my updated CSS
body {
background: pink;
font-family: sans-serif;
}
form label {
display: block;
margin-top:10px;
margin-bottom: 10px;
}
input:focus, textarea:focus { border-color: blue;}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button {
display: inline-block;
width: 100%;
padding: 12px;
border-radius: 5px;
}
button:hover {
background-color: magenta;
}
.radio-group label {
display: inline-block;
margin-right: 10px;
cursor: pointer;
}
.radio-group input[type="radio"]:checked {
border: 2px solid #0077cc;
background-color: #e0f0ff;
box-shadow: 0 0 5px #0077cc;
}
.radio-group input[type="radio"]:checked+label {
color: green
}
input:first-of-type {
border-radius: 10px;
}
form select {
margin-bottom: 20px;
}
unfortunately, it still does not pass the test 17
It works on my end. Did you make any further changes to the order of the input and label elements in your HTML since you last posted that code here?
i made no changes to the HTML at all.
Well, try putting a semi-colon after color: green and see if it goes through then, but I copied your code exactly as you posted it here, and it passed. If adding the semi-colon doesn’t work, try the following:
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.
