Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I keep on failing on step 15 test part 18 it says I should you the checked pseudo class on radio to change txt color of the associated label

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">
    <h1>Job Application Form</h1>
    <form> 
        <label for="name">Full Name: </label>
        <input 
            type="text"
            name="name"
            placeholder="Enter your name"
            required
            id="name"
            />
            <label for="email">Email: </label>
            <input
                type="email"
                id="email"
                name="email"
                placeholder="Enter your email"
                required
            />
                <label for="position">Position: </label>
                <select required  id="position" >
                    <option value="" disabled selected>Select your position</option>
                    <option>Developer</option>
                    <option>Design</option>
                    <option>Manager</option>
                </select>
            <fieldset class="radio-group">
                <legend>Availability: </legend>
                <label for="part-time">Part-Time</label>
                <input 
                    type="radio"
                    name="availability"
                    id="part-time"
                    value="availability"
                    />
                    <label for="full-time">Full-Time</label>
                    <input
                        type="radio"
                        id="full-time"
                        name="availability"
                        value="availability"
                        />
            </fieldset>
            <label for="message">Why do you want this job?</label>
                <textarea required id="message" cols="67" rows="5" placeholder="Write your motivation"></textarea>
                <button type="submit">Submit Form</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    padding: 0;
    background-color: #cec6c6;
}

h1 {
  text-align: center;
 
}

.container {
    max-width: 90%;
    margin: 5px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 16px;
    
}

button {
  border-radius: 16px; 
  font-weight: bold;
  height: 40px;
}

input:focus, textarea:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE   
 }

 select:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE 
 }

button:hover {
  background-color: green;
  color: white;
}

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

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

.radio-group input[type="radio"]:checked {
  -webkit-appearance: none;
  border-color: red;
  background-color: rgb(9, 9, 247);
  box-shadow: 0 1px  rgb(180, 180, 6);
  margin-top: 16px;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.radio-group input[type="radio"] {
  margin-top: 16px;
  width: 10%;

}


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


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

.message {
  padding-top: 16px;
}

fieldset {
  
  border-radius: 16px;
  border-color: green;
  border-width: 1px;
  }
  input:first-of-type{
    color:blue;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Radio buttons are typically placed before their labels in HTML. Try making that change.