Build a Job Application Form - Build a Job Application Form

Programming HTML-CSS
1

Tell us what’s happening:

I still keep getting the following message:
"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">
        <h1>Job Application Form</h1>
        <form action="#">
            <label for="name">Full Name:</label>
            <input type="text" name="name" id="name" value="Full Name" placeholder="Enter your name">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" value="email" placeholder="Enter your email">
            <label for="position">Position:</label>
            <select id="position" name="position">
                <option value="">Select a position</option>
                <option value="developer">Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Manager</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability:</legend>
                <input type="radio" id="full-time" value="Full-Time" name="availability">
                <label for="full-time">Full-Time</label>
                <input type="radio" id="part-time" value="Part-Time" name="availability">
                <label for="part-time">Part-Time</label>
            </fieldset>
            <label for="message">Why do you want this job?</label>
            <textarea id="message" name="message" placeholder="Write your motivation"></textarea>
            <button type="submit" class="submit-btn">Submit Application</button>
        </form>
    </div>
</body>

</html>

/* file: styles.css */
label {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.radio-group label {
  display: inline;
}

.submit-btn {
  display: block;
  margin-top: 20px;
  cursor: pointer;
}

input:focus,
textarea:focus {
  border-color: #ff9997;
  outline: none;
}

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

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

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

.radio-group input[type="radio"]:checked {
  accent-color: green;
  border-color: green;
  background-color: green;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

input[type="radio"]:checked+label {
  color: #007bff;
  font-weight: bold;
}

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

hello @mohammadsalim005 welcome to the forum!

try removing this transition.

4

Thank you, it worked. please explain me how ?

according to cascade rule it should not matter

5

the selector is not for all the labels, it’s only targetting the radio buttons associated labels.

6

the tests are not designed to take the transition delay into account.

the tests collect the label styles as soon as the input is checked, without waiting for the transition to finish, thus failing.

7

Yes; I see what I did there. I’ll delete the post so it doesn’t confuse others reading this post. Thanks for pointing that out.

8

I got it now, thank you