Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

My code does not pass “You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”
I have two selectors: one that targets the :checked radio itself, and one that targets the label immediately after it, but it still does not pass.
Thank you in advance for your help!

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">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
  <div class="container">
  <form>
      <label for="name">Name</label>
      <input type="text" id="name">Full Name</input>
      <label for="email">Email</label>
      <input type="email" id="email">Email</input>
      <label for="position">Position</label>
      <select id="position">Select a job position
        <option id="position" value="pm">PM</option>
        <option id="position" value="president">President</option></select>
      <fieldset class="radio-group">
      <legend>Availability</legend>
      <label for="parttime">Part-time</label>
      <input type="radio" id="parttime" name="availability">Part-time</input>
      <label for="fulltime">Full-time</label>
      <input type="radio" id="fulltime" name="availability">Full-time</input></fieldset>
      <label for="message">Why do you want this job?</label>
      <textarea id="message" name="message">Enter message here</textarea>
      <button type="submit">Submit Application</button>
  </form>
  </div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus{border-color: pink;}
input:invalid, select:invalid, textarea:invalid {border-color: red;}
input:valid, select:valid, textarea:valid {border-color: green;}
button:hover {background-color: yellow;}
.radio-group input[type="radio"]:checked {border-color: skyblue; background-color: lightpink; box-shadow: inset 0 0 0 4px rgba(0,123,255,0.06);}
.radio-group label{color: green; font-weight: normal; cursor: pointer; margin: 0;}
  fulltime:check{color:green;}
  input:first-of-type {color: magenta;}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

what would be the line(s) of code that implement this?

3

I believe it is my lines here:
.radio-group input[type=“radio”]:checked {border-color: skyblue; background-color: lightpink; box-shadow: inset 0 0 0 4px rgba(0,123,255,0.06);} .radio-group label{color: green; font-weight: normal; cursor: pointer; margin: 0;} fulltime:check{color:green;}

4

Note - I highly recommend using the conventions shown in the curriculum so it is easier to read your code.

5

I do not see a line that targets the labels of checked input elements

6

Thank you for the feedback! I will take that into account with future posts. I am still very new to development work, so I am learning as I go. I appreciate your feedback!

1 Like
7

Is that not what this line targets?

.radio-group input[type="radio"]:checked

8

that targets the checked input elements

you need a new line that target the label elements of those

9

and the .radio-group label selector doesn’t encompass my two label elements?

10

it does select your label elements
but at this time you do not have a selector to change the label specifically when the input is checked

11

I truly appreciate your help thus far, there must be a connection from the curriculum that I’m just missing. Are you able to point me in a direction from the curriculum that I can go back and review? I am racking my brain and I’ve been stuck on this story for quite awhile. I’ve tried different resources and I’m just having trouble making the connection.

12

there are two possible approaches here, depending on your html structure. I will share the link to both lectures you can review

https://www.freecodecamp.org/learn/full-stack-developer/lecture-what-is-css/what-are-the-different-types-of-css-combinators
https://www.freecodecamp.org/learn/full-stack-developer/lecture-working-with-pseudo-classes-and-pseudo-elements-in-css/what-are-examples-of-functional-pseudo-classes

13

Thank you! I will review and keep trying!

1 Like
14

Okay, I’ve made adjustments but it’s still not working.


input[type="radio"]:checked ~ label {

  color: blue;

font-weight: bold;

}

Am I getting closer?

15

did you make changes to the HTML?

also consider what the ~ combinator means

16

This is my HTML, I was thinking using the subsequent sibling combinator would mean the next label after each input with the type=”radio” would be selected.



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

<title>Job Application Form</title>

</head>

<body>

<div class="container">

<form>

<label for="name">Name</label>

<input type="text" id="name">Full Name</input>

<label for="email">Email</label>

<input type="email" id="email">Email</input>

<label for="position">Position</label>

<select id="position">Select a job position

<option id="position" value="pm">PM</option>

<option id="position" value="president">President</option></select>

<fieldset class="radio-group">

<legend>Availability</legend>

<input type="radio" id="parttime" name="availability">Part-time</input>

<label for="parttime">Part-time</label>

<input type="radio" id="fulltime" name="availability">Full-time</input>

</fieldset>

<label for="fulltime">Full-time</label>

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

<textarea id="message" name="message">Enter message here</textarea>

<button type="submit">Submit Application</button>

</form>

</div>

</body>

</html>
17

I’m worried about the structure here…

Also, is ~ the next sibling selector?

1 Like
18

no, the subsequent sibling matches all the siblings after an element, that means if after your input there are 5 labels, it selects all of them

19

Thank you for this! After I re-read, I fixed the </fieldset> placement.

20

I’VE DONE IT WITH YOUR HELP! I have worked on this on and off for three days. I am so sorry for the multiple reiterations of my question. It has clicked. I can move on. Thank you so much for your time and help, both of you @ILM and @JeremyLT !