Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I have no clue what to do for step 15. Ive been stuck for days Please Help.

  1. You should 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 rel="stylesheet" href="styles.css"
</head>

<body>
    <div class="container">
        <form>
            <label for="name">Full Name:</label>
            <input type="text" id="name">

            <label for="email">E-mail Address:</label>
            <input type="email" id="email">

            <label for="postion">Position:</label>
            <select id="position">
                <option>Select a Position</option>
                <option>Developer</option>
                <option>Designer</option>
                <option>Manager</option>
            </select>

            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" id="full-time" name="availability" value="full-time">
                <label for="full-time">Full-Time:</label>
                

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

                <input type="radio" id="no-preference" name="availability" value="no-preference">
                <label for="no-preference">No Preferance</label>
                
            </fieldset>
            <label for="message">Why do you want this job?</label>
            <textarea id="message" cols="40" rows="8">
            </textarea>    
            
        <button type="submit">Submit</button>

        </form>
    </div>    
</body>
</html>

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

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}

button:hover {
  background-color: darkslategrey;
}

input:nth-child(1) {
  color: blue;
}

.radio-group input[type="radio"]:checked {
  border-color:brown;
  background-color: blue;
  box-shadow: 1px 1px grey;
  color: blue;
}

input:focus, textarea:focus {
  border-color: blue;
  outline: none;
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}

button:hover {
  background-color: darkslategrey;
}

input:nth-child(1) {
  color: blue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hi,
Try using + label to style the label of the selected radio buttons.
Good luck!

3

I was adding it in the wrong place thank you so much