Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Stuck on step 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.

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 href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form>
            <label for="name">Full Name:<br>
            <input type="text" id="name" placeholder="Enter your name"><br />
            </label>
            <label for="email">Email:<br />
            <input type="email" id="email" placeholder="Enter your email"><br />
            </label>
            <label for="position">Position:<br />
            
            <select id="position" placeholder="Select your position">
                <option>Full Position</option>
                <option>Part Position</option>
                <option>Ful</option>
            </select>
            </label><br />

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

            <label for="message">Why do you want this job<br />

            <textarea id="message" placeholder="Write your motivation">
            </textarea>
            </label><br />

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

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

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

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

button:hover {
  background-color: blue;
  color: white;
}

.radio-group input[type="radio"]:checked {
  border-color: #007BFF;
  box-shadow: 0 0 5px green;
  color: green;
  background-color: green;
}

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

your selector selects label element immediately after the input not around it

you need to use different css for your setup

3

@ILM I changed the positioning of the html elements (placing the label elements after the input) and it worked, what other css could I have used?

4

you could have used :has()

1 Like