Hi there 
I’ve been trying to solve this step but can’t find a solution. It’s related to step 18, where the elements of the of .radio-group class should be styled to change color when :checked. With this code only the of #part-time is styled, but while clicking on the #full-time radio button, I don’t get it T_T If anyone could help, it would be super appreciated thanks!
Here’s the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link ref="stylesheet" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<label for="name">Full Name: </label>
<input type="text" id="name" required/>
<label for="email" required>Email: </label>
<input type="email" id="email" required/>
<label for="position">Position: </label>
<select id="position">
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="manager">Manager</option>
</select>
<fieldset class="radio-group">
<legend for="radio-group">Availability</legend>
<label name="availability" for="full-time">Full-Time</label>
<input
id="full-time" name="availability" type="radio"/>
<label for="part-time" name="availability">Part-Time</label>
<input id="part-time" name="availability" type="radio"/>
</fieldset>
<textarea id="message" placeholder=""></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
And the CSS:
body {
font-style: Arial, sans-serif;
}
.container {
display: block;
max-width: 70%;
min-height: 80%;
margin: 5% auto;
padding: 20px;
box-shadow: 5px 5px 10px 5px lightgray;
border-radius: 10px;
}
input, textarea, select, button {
width: 100%;
border: 1px solid green;
border-radius: 5px;
padding: 2px;
}
textarea {
min-height: 50px;;
}
#name, #email, #position, #message, .radio-group, button {
display: block;
margin: 10px 0;
}
input:focus, textarea:focus {
outline: none;
border: 1px solid green;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
.radio-group input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
cursor: pointer;
transition: all 0.25s ease;
vertical-align: middle;
background-color: white;
}
.radio-group input[type="radio"]:checked {
appearance: none;
border: 3px solid white;
outline: 2px solid green;
background-color: green;
box-shadow: 2px 2px 2px 1px green;
place-content: center;
transition: transform 1s ease-in;
}
.radio-group input[type="radio"] label:checked {
color: green;
}
input:first-of-type {
border-radius: 5px;
}
button[type="submit"] {
background-color: green;
border-radius: 5px;
margin: auto;
color: white;
min-height: 30px;
}
button:hover {
background-color: gray;
cursor: pointer;
}