Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

– I’m being told that all my input elements need to be associated with label elements. I feel like I have done that. What am I missing?

– I’m being told You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected. With the code I have the part time label changes color when I click full time button. When I click part time button the part time label returns to normal and nothing happens with the full time label.

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>

 <header>
      <h1>Application Form</h1>
      <hr>
 </header>

 <main>  
  <div class="container">

      <form>

          <label for="name">Name</label>
          <input id="name" type="text" placeholder="Name" required>
          <label for"email">Email</label>
          <input id="email" type="email" placeholder="Email" required>
          <label for="position">Position</label>

          <select id="position"> 
              <option value="" disabled selected>Select position</option>
              <option value="developer">Developer</option>
              <option value="designer">Designer</option>
              <option value="manager">Manager</option>               
         </select>

              <label for"radio-group">Availability</label>

            <fieldset class="radio-group">
              <label for="full-time">Full time</label>
              <input id="full-time" type="radio" class="radio" name="availability">
              <label for="part-time">Part time</label>
              <input id="part-time" type="radio" class="radio" name="availability">
            </fieldset>
        <label for="message">Comments</label>
         <textarea id="message" placeholder="comments"></textarea>
         <button type="submit">submit form</button>

      </form>
  </div>
 </main> 
</body>
</html>

/* file: styles.css */
body {
  text-align: center;
  background-color: beige;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

hr {
  width: 90%;
  height: 3px;
}

.container {
  max-width: 600;
  margin: 50px auto;
}

input, #position, textarea {
  width: 80%;
  margin: 1em;
}

.radio-group {
  background-color: lightblue;
}

#message{
  margin-top: 20px;

}

textarea {
   height: 200px;
}

button {
  width: 40%;
  height: 30px;
background-color: salmon;
font-family: sans-serif;
}

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: yellow;
}

.radio-group input[type="radio"]:checked {
  border-color: red;
  background-color: pink;
  box-shadow: inset 0 0 0 5px black;
}

input:first-of-type {
  background-color: yellow;
}

.radio:checked + label {
  color: white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0.1 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Typo here. You are missing the =.

3

fix that and also found this

<label for"email">Email

which I also fixed. that took care of my input and label issue but the pseudo-class problem still persists

4

In your HTML, you have your label before your radio button. That’s not typical. I suggest flipping those to make it easier to style the label when the radio button is checked. Then you can refer to this link for further guidance on the CSS:

EDITED to provide the correct link.

5

weird. why does it matter if the label is before or after? that suggestion worked to correct the color change issue. thanks. but your link was to a boilerplate explanation not anything about CSS.

6

That’s definitely not the link I intended to provide. I’ve edited my previous post to provide the intended link.

I suggest googling your “why does it matter” question. :slight_smile:

7

if you use the right CSS selector you can make it work also with the previous version of the HTML, to pass this tests

for the order of label and input, it is an accessibility thing