Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

i am having issues with creating a submit button and styling a :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>
<label class="full-name" for="name">Full Name:</label>
    <input class="name" type="text" id="name" placeholder="Enter your name"
</input>
<label class="email" for="email">Email:</label>
    <input class="email" type="email" id="email" placeholder="Enter your email" </input>
<label class="position" for="position">Position:</label>
    <select class="position" id="position" name="availability">
    <option value="manager">Manager</option>
    <option value="director">Director</option>
    <option value="receptionist">Receptionist</option>
    <option value="developer">Developer</option>
        </select>
        <fieldset class="radio-group" name"availability">
<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>
    </fieldset>
    <textarea class="textarea" id="message"</textarea>
<button type="submit">Submit</button>
    
    
    </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,
textarea:focus {
  border: 4px solid blue;
}
input:invalid,
select:invalid,
textarea:invalid {
  border: 4px red;
}

input:valid,
select:valid,
textarea:valid{
  border: 4px  green
}
button:hover{
  background-color: pink;
}
.radio-group input[type="radio"]:checked {
  border: 4px brown;
  background-color: purple;
  box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
  color: darkorange;
}
.position:checked {
color: green;
 }
input:first-of-type {
border-radius: 12px
border: 4px solid gold;
padding: 8px
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.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

Have you tried searching the forum for this? It’s been answered many times recently.

Double check what your CSS combination selector actually does, I mean read the definition of it and see if it applies to your HTML