Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Regarding the Build a Job Application Form, I have passed all tests accept #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 have checked this forum and none of the explanations make any sense to me. Also, Google is convinced that .raditoo-group input[type=“radio”]:checked + label { color: your color;} is the proper route. The proper code would be appreciated.

Your code so far

<!-- 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>
        <input type="text" id="name">
        <label for="name">Full Name:</label>
        <input type="email" id="email">
        <label for="email">Email:</label>
        <select id="position">
            <option value="police-officer">Police Officer</option>
            <option value="auxiliary-oficer">Auxiliary Officer</option>
        </select>
    <fieldset class="radio-group">
        <label>Full Time:<input type="radio" name="availability"></label>
        <label>Part Time:<input type="radio" name="availability"></label>
    <textarea id="message"></textarea>
    </fieldset>
    <button type="submit">Submit Application</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
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:hover {
  background-color: purple
}
.radio-group input[type="radio"]:checked {
  border-color: yellow;
  background-color: lightblue;
  box-shadow: 0 0 5px gray;
}
.radio-group input[type="radio"]:checked, .radio-group label:checked {
  color: indigo;
}
input:first-of-type {
  border-left: 5px solid orange;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

hi and welcome to the forum.

Please note we do not provide code solutions to questions.
We’d be happy to answer a question you have about something you’ve read however since you said:

If you can tell us which one didn’t make sense and what you think you understood or didn’t understand, we can help with that.

Please note that there are 2 ways to get an answer. You can create it yourself or you can have someone else write it for you. We like to focus on helping people learn how to make the code themselves here while other websites you may find will be able to help with just giving an answer.

Try to look at the relationship between the label and radio button. Identify what type of relationship is it to start with. (words you can use to describe element relationships include ‘this element is a [sibling/child/parent/etc.] of this other element’)

Then look up which css selector is best used to signify that relationship.

1 Like