Build a Job Application Form - Step 16/Test 18

HTML-CSS
1

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. :distorted_face:

Heres the html file:

<!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:

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;
}
2

hello @Red_Rheya , welcome to the forum!

All of your radio inputs have the same id. Elements must have unique ids.

3

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

1 Like