Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I am hard stuck on question 16. I’ve seen others post about it in the forums and no one gave a correct answer
Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

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 href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form>
        <label>
        <input type="text" id="name">
        </label>
        <label>
        <input type="email" id="email">
        </label>
        <select id="position">
            <option><option>
            <option><option>
            <option><option>
        </select>
        <fieldset class="radio-group">
            <label>
            <input type="radio" name="availability" value="full-time">
            </label>
            <label>
            <input type="radio" name="availability" value="part-time">
            </label>
            <label>
            <input type="radio" name="availability" value="weekends">
            </label>
            <textarea id="message"></textarea>
            <button type="submit"></button>
            </fieldset>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus{
  border-color: red;
}
input:invalid, select:invalid, textarea:invalid{
  border-color: red;
}
input:valid, select:valid, textarea:valid{
  border-color: green;
}
button:hover{
  background-color: yellow;
}
.radio-group input[type="radio"]:checked{
  border: solid;
  background-color: black;
  box-shadow: 0 4px 10px;
}
.radio-buttons label:checked{
  color: red;
}

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

What is test 16? What lines of code do you think should satisfy that test? How did you get stuck debugging?

3
  1. Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
4

Please read and answer everything I asked.

5

test 16 is Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
the code I tried to use is .radio-buttons label:checked{ color: red; }.
I am stuck debugging because I am new and have no clue what I am doing wrong. please help

6

What did you try? Please say something about what you actually tried to do to figure out how to change your code to pass.

Did a lesson cover that syntax? I don’t recall seeing it? There is no radio-buttons element? (Which would be <radio-buttons .....>)

7

I tried input[type=“radio”]:checked + label {

color: blue;

}
and
.radio-group input[type=“radio”]:checked +label { color: green; }

8

do you know what the + means?