Build a Job Application Form - Test 15, :checked pseudo-class

HTML-CSS
1

Tell us what’s happening:

Looking for help regarding Test 15, “You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.” As wonky as the UX is, it seems to me that it should functionally be working. Any advice?

My code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="styles.css" rel="stylesheet">
    <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"> Name</input>
            <input type="email" id="email"> Email</input>
            <select id="position">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
            <fieldset class="radio-group">
                    <input type="radio" name="availability"></input>
                    <label for="full-time">Full Time</label>
                    <input type="radio" name="availability"></input>
                    <label for="part-time">Part Time</label>
                    <input type="radio" name="availability"></input>
                    <label for="seasonal">Seasonal</label>
                    
                </fieldset>
                <textarea id="message"></textarea>
                <button type="submit"></button>
        </form>
    </div>
</body>
</html>

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

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

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

button:hover {
  background-color: lightgreen;
  width: 20vm;
}

.radio-group input[type="radio"]:checked {
  border-color: purple;
  background-color: lightblue;
  box-shadow: 2 2 8px grey;
}
.radio-group label{
  border-color: yellow;
  color: darkblue;
}

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

input:first-of-type {
  border-radius: 30%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

I would do the following.

  1. Make sure on your radio inputs you are giving it an “ID” that is equal to your label’s “FOR” attribute. This is what links them…

  2. Look at the “Next Sibling Combinators”: Next-sibling combinator - CSS: Cascading Style Sheets | MDN.

  3. You’re looking to create a new selector based on that document that combines your “radio buttons checked” plus your “label” element .

  4. Make all your property adjustments there.

1 Like
3

Thanks so much! With a fresh mind today I did a total reset and consulted your source for extra information. The idea of what each portion of code actually meant finally clicked! Your username is pretty opposite of your writing :slight_smile:

1 Like