Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Task 15, im pretty sure what i did works, the label does change color when i click on the radio button, so what else must i do ?

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 href="styles.css" ref="stylesheet">
    <title>Job Application Form</title>
</head>
<body>
  <div class="container">
      <form>
          <input type="text" id="name">
          <input type="email" id="email">
          <select id="position">
              <option>1</option>
              <option>2</option>
          </select>
          <fieldset class="radio-group">
              <legend>Availability</legend>
                  <input type="radio" name="availability" value="1"><label for="1">aaa</label>
                  <input type="radio" name="availability" value="2"><label for="2">aaaa</label>
                  <input type="radio" name="availability" value="3"><label for="3">aaaaa</label>
          </fieldset>
          <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: magenta
}
.radio-group input[type="radio"]:checked {
  border-color: magenta;
  text-color: magenta;
  background-color: magenta;
  box-shadow: 0 1px magenta;
}
input[type="radio"]:checked + label {
  color: purple;
}
input:nth-child(1) {
  border: 1px solid
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

your label and input elements are not associated properly, you will want to review how that is done

3

Hi @Nommer !

Welcome to the forum!

Here is the lecture going over associating labels with inputs

Hope that helps

4

OMG I GET IT NOW, read so many people saying that and i just got it, thank you!

1 Like
5

Glad you were able to get it working.

As a sidenote, be careful here

it should be the color property :+1:

1 Like