Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Label for unchecked radio button is changing color instead of the radio button I am selecting even though I am using :checked

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: </label>
        <input type="text" id="name">
    <label for="email">Email Address: </label>
        <input type="email" id="email"> 
    <label for="position">Job Position</label>
    <select id="position">
         <option value="programmer">Programmer</option>
  <option value="tester">Tester</option>
    </select>
    <fieldset class="radio-group">
        <legend>
            Availability?</legend>
     <label class="availability" for="full-time">Full-time: </label><input type="radio" class="availability-radio-button" name="availability" value="full-time" id="full-time">
     <label class="availability" for="part-time">Part-time: </label><input type="radio" class="availability-radio-button" name="availability" value="part-time" id="part-time">
    </fieldset>
    <label for="message">Message</label>
    <textarea id="message">
        </textarea>
        <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus{
  border-color:blue;
}
input:invalid, select:invalid, textarea:invalid{
  border-color:red;
}
input:valid, select:valid, textarea:valid{
  border-color:green;
}

button:hover{
  background-color:pink;
}

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

.radio-group input[type="radio"]{
    margin-right: 10px;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: border-color 0.2s;
  }
.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 
  color: green;
}

.radio-group label:checked{
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

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

Let’s figure out together what this CSS block is doing shall we.

3

Hi @BrianL1018 ,

MDN: Next Sibling Combinator

Your selector is looking for a label that is the next sibling of the radio button (meaning the label comes right after the radio button), but that’s not the way your HTML is organized. It’s actually typical for developers to place a radio button before its label to enhance the user experience.

Try reorganizing your HTML.

Also, the transition in your CSS may bork the tests (timing issue).

Happy coding!