Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hello,
Just another person stuck on step 15. I am not sure what else I need for this step to pass. My labels and inputs seem like they are properly linked and I am not sure what I am missing in my css

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>
  <input type="text" id="name">
  <input type="email" id="email">
  <select id="position">
  <option>Developer</option>
  <option>Designer</option>
  <option>Project Manager</option>
  </select>
    <fieldset class="radio-group" name="availability">
      <legend>Availability</legend>
      <label class="radio" for="full-time">Full-time</label>
      <input name="availability" id="full-time" type="radio">
      <label class="radio" for="part-time">Part-time</label> 
      <input name="availability" id="part-time" type="radio"> 
    </fieldset>
    <textarea id="message"></textarea>
    <button type="submit">Submit</button>
  </form>
  </div>
</body>
</html>

/* file: styles.css */
input:focus, 
textarea:focus{
 border-color: orangered;
}
input:invalid,
select:invalid,
textarea:invalid{
 border-color: red;
}
input:valid,
select:valid,
textarea:valid{
 border-color: green;
}
button:hover{
 background-color: green;
}
.radio-group input[type="radio"]:checked{
 border-color: green;
 background-color: gray;
 box-shadow: 1px 1px 1px 1px gray;
}
input[type="radio"]:checked + label{
 color: orange;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

you should double check what the + mean, or test what happens. the wrong label is getting colored

1 Like
3

Thanks, I’ll do that

4

Is the plus sign the wrong combinator?

5

it can be the right one, but there is something you would need to change

remember it is the next sibling combinator

6

do i reverse the order of the selectors?

7

that would not select the label, as the last one on the list is the one selected

you would need to change something in your HTML or use an additional CSS function in your selector

8

What do I need to change in the html? Is it the values of the “for” and “id” attributes? I’m kind of lost

9

In online forms that you have visited, does a radio button typically go after the label or before the label? Which seems more intuitive from a user experience?

10

Ahh, thank you. I see now