Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hello I got stuck with this for a while and try to adjust code and it still not work
15. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected

After try edit a little bit code it still not work…

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">
    <link rel="stylesheet" href="styles.css" />
    <title>Job Application Form</title>
</head>
<body>
    <div class="container">
    <form>
    <input type="text" id="name" />
    <input type="email" id="email" />
    <select id="position">
        <option id="option1">Male</option>
        <option id="option2">Female</option>
        <option id="option3">Prefer not to say</option>
        
    </select>
    <fieldset class="radio-group">
    <input type="radio" id="full-time" name="availability" />
    <label for="full-time">Full-time</label>

    <input type="radio" id="part-time" name="availability" />
    <label for="part-time">Part-time</label>

    <input type="radio" id="internship" name="availability" />
    <label for="internship">Internship</label>
</fieldset>

    <textarea id="message" placeholder="enter you message"></textarea>
    <button type="submit">Submit</button>
    </fieldset>
    </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,
textarea:focus {
  border-color: orange;
}

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 {
  background-color: lightblue;
  border-color: navy;
  box-shadow: 0 0 5px grey;
}

.radio-group input[type="radio"]:checked + label {
  color: blue; 
}

input:nth-child(1) {
  border-radius: 10px; 
  border: 2px solid navy;
  padding: 8px; 
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Welcome to the forum @NewLZ

Your code passes.
Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding