Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

can someone help me out, i seem to be stuck here

  1. 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"
    >
<label for="name">Full Name:</label>
 <input
    type="email"
    id="email"
    >
   
<label for="email">Email:</label>
   
    <label for="position">position</label>
    <select id="position">
        <option value="manager">manager</option>
        <option value="assistant">assistant</option>
        <option value="secretary">secretary</option>
    </select>
<fieldset  class="radio-group" name="availability">
<legend>availability</legend>
<input type="radio" name="availability" id="Part-Time" value="Part-Time">
<label for="Part-Time">Part-Time<label>
<input type="radio" name="availability" id="Full-Time" value="Full-Time">
<label for="Full-Time">Full-Time<label>   
    </fieldset>
<p>why you want this job?</p>
<textarea id="message"></textarea>
<button type="submit">submit</button>


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

/* file: styles.css */
body {
  font-family: arial, sans-serif;
}

h1 {
  text-align: center;
}

p, legend, label:not(.availability) {
  font-weight: bold;
}

textarea {
  width: 100%;
  height: 15vh
}

input[type="text"], input[type="email"], select {
  margin-bottom: 5px;
  width: 100%;
  display: block
}

input:focus, textarea:focus {
  border: solid 1px lightblue;
}

input:invalid, select:invalid, textarea:invalid {
  border: solid 2px red;
}

input:valid, select:valid, textarea:valid {
  border: solid 2px green;
}

button {
width: 80vw;
background-color: lightblue;
margin: 10px auto 10px auto;
padding: 10px;
font-size: 1.2rem;
display: block

}

button:hover {
  background-color: aqua
}

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

.radio-group input[type="radio"]:checked{
  appearance: none;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  box-shadow: 3px 3px lightgray;
  border: 2px solid green;
  background-color: aqua;
}

input:nth-child(1) {
  color: green}
input:first-of-type {
  color:red;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

double check your input and label elements, make sure all the needed syntax is there

4

thanks i fixed it but that doesnt seem to be the problem

5

what is your code now?

6

4 posts were split to a new topic: Build a Job Application Form - Build a Job Application Form