# Build a Job Application Form - Step 16/Test 18

**URL:** <https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [February 12, 2026, 2:35am UTC](https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220 "2026-02-12T02:35:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Red\_Rheya](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@Red\_Rheya](https://forum.freecodecamp.org/u/Red_Rheya)\
**Post date:** [February 12, 2026, 2:35am UTC](https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220/1 "2026-02-12T02:35:29Z")

</div>

Hey ya’ll!

I’m trying to figure out why this step:

“_You should use the `:checked` pseudo-class on radio buttons to change the text color of the associated `label` when the option is selected_.”

is not passing, even though in the preview it works. Now, I have scanned through tons of similar posts and made lots of changes (big and small), I even put my html code through one of the html checkers, as well as pasting the exact step into good ole’ Google search to try and find a solution.

Most likely it’s something that I just can’t see, and need fresh eyes. 🫪

Heres the html file:

```xml
<!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>
        <h1>Job Application Form</h1>
       <div class = "container">
        <form>
            <label for="name">Full Name: </label>
            <input type="text" id="name">
            <label for="email">Email: </label>
            <input type="email" id="email">
            <select name="position" id="position">
                <option value="select-posotion">Select Position</option>
                <option value="lead-developer">Lead Developer</option>
                <option value="project-manager">Project Manager</option>
                <option value="designer">Designer</option>
            </select>

            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" id="availability" name="availability">
                <label for="availability">Full Time</label>
                <input type="radio" id="availability" name="availability">
                <label for="availability">Part Time</label>
                <input type="radio" id="availability" name="availability">
                <label for="availability">Casual</label>

                <p>Is there anything you'd like to share with us?</p>
                <textarea id="message" placeholder="skills interests etc..."></textarea>
            </fieldset>

            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

```

And the CSS file:

```css
h1 {
    text-align:center;
    background-color:bisque;
    margin:40px 15px;
    padding:10px;
    font-family:Arial;
}

.container {
    background-color:antiquewhite;
    text-align:center;
    width:auto;
    height:60vh;
}

#name, #email, #position{
    margin:10px;
    width:250px;
    padding:2px;
    font-size:large;
}

#position {
    width:250px;
    padding:5px;
}

fieldset {
    height:40vh;
    margin:10px;
    background-color:aliceblue;
    border-color:aliceblue;
    border-radius:10px;
    font-size:larger;
}

#availability {
    margin:20px;
}

#message {
    width:500px;
    height:150px;
}

button {
    width:100px;
    height:30px;
    background-color:cornflowerblue;
    border-radius:5px;
    color:midnightblue
}

input:focus, textarea:focus {
    border-color:orangered;
}

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

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

button:hover {
    background-color:lightblue;
    box-shadow: 0 1px #c0392b;
}

.radio-group input[type="radio"]:checked{
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid darkgreen;
    border-color:green;
    background-color:green;
    box-shadow: 1px 1px gray;
}

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

input:first-of-type{
    color:blue;
}

```

---

<div class="post-metadata">

**Author:** ![sampatee](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sampatee/32/408211_2.png) [@sampatee](https://forum.freecodecamp.org/u/sampatee)\
**Post date:** [February 12, 2026, 7:25am UTC](https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220/2 "2026-02-12T07:25:42Z")

</div>

hello @Red_Rheya , welcome to the forum!

All of your radio inputs have the same `id`. Elements must have _unique_ `id`s.

---

<div class="post-metadata">

**Author:** ![Red\_Rheya](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@Red\_Rheya](https://forum.freecodecamp.org/u/Red_Rheya)\
**Post date:** [February 12, 2026, 2:05pm UTC](https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220/3 "2026-02-12T14:05:15Z")

</div>

Ah! Wonderful thank you, I knew it was something small, all tests passed!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [March 12, 2026, 2:05pm UTC](https://forum.freecodecamp.org/t/build-a-job-application-form-step-16-test-18/778220/4 "2026-03-12T14:05:18Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.