Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

what am I missing? Can you please tell me why it’s not working?

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 to the external stylesheet -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <form>
      <!-- Full Name -->
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="name" required>

      <!-- Email -->
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <!-- Job Position -->
      <label for="position">Position:</label>
      <select id="position" name="position" required>
        <option value="">Select Position</option>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
        <option value="manager">Manager</option>
      </select>

      <!-- Availability -->
      <fieldset class="radio-group">
        <legend>Availability</legend>

        <label for="full-time">
          <input type="radio" id="full-time" name="availability" value="full-time" required>
          Full-Time
        </label>

        <label for="part-time">
          <input type="radio" id="part-time" name="availability" value="part-time">
          Part-Time
        </label>
      </fieldset>

      <!-- Message -->
      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="4" required></textarea>

      <!-- Submit Button -->
      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>


/* file: styles.css */
input:focus, textarea:focus{
border-color: #4A90E2;
}
input:invalid, select:invalid, textarea:invalid{
border-color: red;  
}
input:valid, select:valid, textarea:valid{
border-color: green;  
}
button:hover{
background-color: yellow;
}
input[type="radio"]:checked + label {
  color: blue; /* Change this to any color you want */
  font-weight: bold;
}
input:first-of-type {
  border-radius: 10px; /* Rounded corners for the first input */
  border: 2px solid #4CAF50; /* Optional: give it a different border */
  padding: 8px;

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

are your labels and inputs siblings?

1 Like
3

No, they are not siblings

4

so you may imagine that a next sibling combinator would not work

5

label:has(input[type=“radio”]:checked) {
color: blue;
font-weight: bold;
}

I fixed the code, but it still doesn’t work.

6

can you post the whole updated CSS?

you did not make changes to the html, right? if you did post the updated code too