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
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-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

9

I really appreciate your help, it works now!

10 
<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">

Full Name

<input type="text" id="name"placeholder="Enter your name" required>

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

<input type=“email” id="email"placeholder=“Enter your email” required>

Position:

Availability:

Full Time

Part Time

Why do you want this job?

Submit Application

</form>

body{

font-family: Arial, san-serif;

background-color: rgba(217, 0, 255, 0.082);

padding: 20px;

}

.container{

max-width: 600px;

background-color: white;

margin: 0 auto;

padding: 20x;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(217, 0, 255, 0.082);

}

label{

display: block;

margin-top: 5px;

margin-bottom: 5px;

font-weight: bold;

}

input, select, textarea{

width: 100%;

padding: 10px;

margin-bottom: 15px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

.redio-group{

display: flex;

align-items: center;

margin-top: 15px;

}

.radio-group input[type=“radio”]{

appearance:none;

width: 30px;

border-radius:50%;

outline: none;

border:2px solid green;

}

button{

width: 100%;

padding: 10px;

background-color: green;

color: white

border: none;

border-radius: 4px;

font-size: 16px;

cursor: pointer;

}

input:focus, textarea:focus{

border: 2px solid rgba(73, 68, 87, 0.643);

outline: none;

}

input:invalid, select:invalid, textarea:invalid{

border-color: red;

}

input:valid, select:valid, textarea:valid{

border-color: green;

}

button:hover{

background-color: rgba(217, 0, 255, 0.082);

}

.radio-group input[type=“radio”]:checked{

border-color: green;

background-color: green;

box-shadow: inset 0 0 0 4px white;

}

.radio-group input[type=“radio”]:checked+ label{

color: green;

}

input:first-of-type{

border-top-left-radius: 4px;

border-top-right-radus: 4px;

}

11

do you have additional questions?