Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I tried what I can but it still stays I faild can you tell me what is the problem
15. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

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>
    <div class="container">
        <form>
            <input type="text" id="name">
            <input type="email" id="email">
            
            <select id="position" required>
                 <option value="">Select Position</option>
                 <option value="developer">Developer</option>
                 <option value="designer">Designer</option>
                 <option value="manager">Manager</option>
            </select>
            <fieldset class="radio-group">
                <legend>availability</legend>
                <label>
                 <input type="radio" name="availability" value="full-time">
                   Full-Time
                </label>
                <label>
                 <input type="radio" name="availability" value="part-time">
                   Part-Time
                </label>
                <label>
                  <input type="radio" name="availability" value="freelance">
                   Freelance
                </label>
            </fieldset>
            <textarea id="message"></textarea>
            <button type="submit"></button>
        </form>
        </div>

</body>
</html>

/* file: styles.css */
/* file: styles.css */
body{
  font-family: arial, sans-serif;
  padding: 20px;
}
.container{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1{
  text-align: center;
}

input:invalid, select:invalid, textarea:invalid{
  border-color: red;
}

input, textarea, select{
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid white;
  border-radius: 4px;
  box-sizing: border-box;
}

input:valid, select:valid, textarea:valid{
  border-color: green;
}

input:focus, textarea:focus{
  border-color: violet;
}

.radio-group{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-group input[type="radio"]{
    margin-right: 10px;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: border-color 0.2s;
  }
.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 

}
input[type="radio"]:checked + label {
  color: blue; 
}

.radio-group label{
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

label{
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}


input:nth-child(1){
  border-radius: 5px;
}

button{
  background-color: green;
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 20px;
  border: 0px solid white;
  border-radius: 4px;
  color: white;
}

button:hover{
  background-color: black;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hi,
your labels aren’t linked with the radio buttons. The css is correct just try taking the inputs out of the label elements and connect them by giving the inputs id attribute and the labels for attribute.
Good luck!

4

Thank you, for your advise
And you were right

1 Like