Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

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 tried so many different suggestions from across the internet forums and I can not seem to get this one. I must be missing something somewhere.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
    <form>
        <input type="text" id="name">Full Name<label for="name"></label>
        <input type="email" id="email">Email Address<label for="email"></label>
        <select id="position">
            <option>First</option>
            <option>Second</option>
            <option>Third</option>
        </select>
        <fieldset class="radio-group">
            <input type="radio" name="availability" id="full"/><label for="full">Full Time</label>
            <input type="radio"  name="availability" id="part"/><label for="part">Part Time</label>
                </fieldset>        
            <label for="message">Message us</label><textarea id="message">Send us a message here</textarea>   
            <button type="submit">Submit</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: pink; }
.radio-group input[type="radio"]:checked { border-color: purple;
background-color: coral;
box-shadow: 0 0 3px red; }
input:first-of-type { background-color: pink; }
.radio-group input[type="radio"] + label:checked { color: purple; }

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form help with step 15 please.

2

can a label be :checked? consider again which element can be checked

3

I got it. Thank you. I saw a similar response for other people asking the same question and it wasn’t clicking. The way you worded it, it just clicked for me. Very much appreciated.