Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I’ve looked at past posts and I’ve checked my code and I can’t figure out why I keep getting an error for #15 “Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.” My code works and it changes the label color as it should but I still get an error.

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>
            Full Name: <input type="text" id="name" /></br>
                Email: <input type="email" id="email" />
                    <p>Position
                        <select id="position">
                            <option>  </option>
                            <option>Administrative Assistant</option>
                                <option>Entry Level Web Developer</option>
                                    <option>Entry Level Backend Developer</option>
                                        <option>Entry Level Full Stack Developer</option>
                                        </select></p>
                                        <fieldset class="radio-group" name="availability">
                                    <legend>Availability</legend>
                                <input type="radio" name="availability" id="full-time"/>
                                <label for="availability">Full-Time</label>
                            <input type="radio" name="availability" id="part-time"/>
                            <label for="availability">Part-Time</label>
                        <input type="radio" name="availability" id="contract"/>
                        <label for="availability">Contract</label>
                   </fieldset>
                <textarea id="message">Enter a message</textarea></br>
            <button type="submit">Submit</button>
            <button type="reset">Reset</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
form {
  background-color: lightblue;
  text-align: left;
  padding: 10px;
}


input:hover, textarea:hover {
  border-color: hotpink;
}

button:hover {
  border-color: hotpink;
  background-color: hotpink;
  box-shadow: 0 0 0 4px grey;
  transition: 0.3s ease;
}

input:invalid, select:invalid, textarea:invalid  {
  border-color: red;
  box-shadow: 0 0 0 4px red;
}


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

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


.radio-group input[type="radio"]:Checked {
  border-color: hotpink;
  box-shadow: 0 0 0 4px hotpink;
  background-color: hotpink;
  
}

/* .radio-group input[type="radio"] label:checked {
  border-color: hotpink;
  box-shadow: 0 0 0 4px hotpink;
  background-color: hotpink;
} */


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

input:first-of-type {
  border-radius: 5px;
}

textarea {
  margin: 20px 20px;
}

button {
  margin: 10px;
  padding: 5px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

do you think your input and label elements are correctly associated? you can test this, if you click on the label the input should become checked/unchecked if they are correctly associated

1 Like
3

Thank you! I fixed my code and it worked. I appreciate your help!