don’t pass the test in 18
<!-- 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>
<div class="container">
<form id="job-form">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="position">Position</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Frontend Developer</option>
<option value="designer">UI/UX Designer</option>
<option value="manager">Project Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<label class="radio-option">
<input type="radio" name="availability" value="full-time" required>
Full-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="part-time">
Part-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="contract">
Contract
</label>
</fieldset>
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Tell us something about you"></textarea>
<button type="submit">Submit Application</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
/* Container */
.container {
max-width: 450px;
margin: 40px auto;
padding: 20px;
background: #fafafa;
border-radius: 12px;
font-family: Arial, sans-serif;
}
/* Labels */
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
/* Inputs, Select, Textarea */
input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
/* FIRST input styled differently */
input:first-of-type {
border-radius: 20px;
}
/* Focus state */
input:focus,
textarea:focus {
border-color: #0077ff;
outline: none;
}
/* Valid / Invalid states */
input:valid,
select:valid,
textarea:valid {
border-color: green;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
/* Radio Group */
.radio-group {
margin-top: 20px;
border: none;
padding: 0;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
cursor: pointer;
}
/* Hide default radio */
.radio-option input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #666;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: 0.3s;
}
/* Checked radio styling */
.radio-group input[type="radio"]:checked {
border: solid 1px #0077ff;
background-color: #cfe4ff;
box-shadow: 0 0 4px #0077ff;
}
/* Change label color when selected */
.radio-group input[type="radio"]:checked + label{
border: solid 1px #1078af;
}
/* Button */
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background: #0077ff;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
/* Hover */
button:hover {
background: #005fcc;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0
Build a Job Application Form - Build a Job Application Form
I’m sorry if my explanation is not too much detailed. the first is lost when i try to login for first time
dhess
March 25, 2026, 8:08pm
3
Welcome to the forum @sjc22031977 !
Are your radio buttons associated with their labels? Also, I notice you are using transition in your CSS…that can bork the tests (a timing issue).
Happy coding!
I deleted the transitions and the labels are associated. I copy the part of the code with the labels
<fieldset class="radio-group">
<legend>Availability</legend>
<label class="radio-option">
<input type="radio" name="availability" value="full-time" required>
Full-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="part-time">
Part-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="contract">
Contract
</label>
</fieldset>
dhess
March 26, 2026, 1:59pm
5
Your labels are still not associated with their input elements.
Here’s an example from this reference :
The text field in the example below has the explicit label of “First name:”. The label element’s for attribute matches the id attribute of the input element.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
i did it but i have the same error
<legend>Availability</legend>
<label class="radio-option" for="full-time">Full-Time
</label>
<input type="radio" name="availability" value="full-time" id="full-time" required>
<label class="radio-option" for="part-time">Part-Time
</label>
<input type="radio" name="availability" value="part-time" id="part-time">
<label class="radio-option" for="contract">Contract</label>
<input type="radio" name="availability" value="contract" id="contract">
</fieldset>
dhess
March 27, 2026, 9:46am
7
Your selector’s next sibling combinator is looking for the label to come immediately after the radio button, which is typically the way a radio button and label are coded in HTML.
yes, before i had the input nested into label. i though that was enough to link the label with the input, then i add the for in the label and the id in the input. how i t supposed to be this line now. i am lost. i don’t know what is wrong. everybody it is having problems with this exercise. it is not clear the hints
dhess
March 27, 2026, 12:18pm
9
A radio button’s HTML is typically coded like this:
<input type="radio" id="btn">
<label for="btn">My radio button label</label>
So that the radio button is before the label.
Sorry, but i continue with the error. I pass my code
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="full-time">
<label for="full-time">Full-Time
</label>
<input type="radio" name="availability" id="part-time">
<label for="part-time">Part-Time</label>
<input type="radio" name="availability" id="contract">
<label for="contract">Contract</label>
</fieldset>
dhess
March 31, 2026, 12:20pm
11
This is the hint from failed test #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.
And this is the code for your selector:
.radio-group input[type="radio"]:checked + label{
border: solid 1px #1078af;
}
How is your code meeting the above requirement?
Well the error continue
<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">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="position">Position</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Frontend Developer</option>
<option value="designer">UI/UX Designer</option>
<option value="manager">Project Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="full-time">
<label for="full-time">Full-Time
</label>
<input type="radio" name="availability" id="part-time">
<label for="part-time">Part-Time
</label>
<input type="radio" name="availability" id="contract">
<label for="contract">Contract</label>
</fieldset>
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Tell us something about you"></textarea>
<button type="submit">Submit Application</button>
/* Container */
.container {
max-width: 450px;
margin: 40px auto;
padding: 20px;
background: #fafafa ;
border-radius: 12px;
font-family: Arial, sans-serif;
}
/* Labels */
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
/* Inputs, Select, Textarea */
input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 2px solid #ccc ;
border-radius: 6px;
font-size: 1rem;
}
/* FIRST input styled differently */
input:first-of-type {
border-radius: 20px;
}
/* Focus state */
input:focus,
textarea:focus {
border-color: #0077ff ;
outline: none;
}
/* Valid / Invalid states */
input:valid,
select:valid,
textarea:valid {
border-color: green;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
/* Radio Group */
.radio-group {
margin-top: 20px;
border: none;
padding: 0;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
cursor: pointer;
}
/* Hide default radio */
.radio-option input[type=“radio”] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #666 ;
border-radius: 50%;
position: relative;
cursor: pointer;
}
/* Checked radio styling */
.radio-group input[type=“radio”]:checked {
border: solid 1px #0077ff ;
background-color: #cfe4ff ;
box-shadow: 0 0 4px #0077ff ;
}
/* Change label color when selected */
.radio-group input[type=“radio”]:checked + label{
border: solid 1px #1078af ;
}
/* Button */
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background: #0077ff ;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
}
/* Hover */
button:hover {
background: #005fcc ;
}
dhess
April 7, 2026, 12:53pm
13
What does the hint from Test #18 say you should change on the radio button label when it’s checked? And what is your selector doing instead?
The hint say this “You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”
and my code do this:
/* Change label color when selected */
.radio-group input[type=“radio”]:checked + label{
border: solid 1px #1078af ;
}
Sorry I did not receive a new answer yet
dhess
April 20, 2026, 11:54am
16
The hint says you should change the text color, not the border.
dhess
April 24, 2026, 1:46pm
18
Welcome to the forum @hsodikm !
Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.
The easiest way to create a topic for help with your own solution is to click the Help button
Thank you.
Happy coding!
located on each challenge. This will automatically import your code in a readable format and pull in the challenge URL while still allowing you to ask any question about the challenge or your code.