Tell us what’s happening:
Looking for help regarding Test 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.” As wonky as the UX is, it seems to me that it should functionally be working. Any advice?
My code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<form>
<input type="text" id="name"> Name</input>
<input type="email" id="email"> Email</input>
<select id="position">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<fieldset class="radio-group">
<input type="radio" name="availability"></input>
<label for="full-time">Full Time</label>
<input type="radio" name="availability"></input>
<label for="part-time">Part Time</label>
<input type="radio" name="availability"></input>
<label for="seasonal">Seasonal</label>
</fieldset>
<textarea id="message"></textarea>
<button type="submit"></button>
</form>
</div>
</body>
</html>
/* file: styles.css */
input:focus, textarea:focus{
border-color: violet;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: lightgreen;
width: 20vm;
}
.radio-group input[type="radio"]:checked {
border-color: purple;
background-color: lightblue;
box-shadow: 2 2 8px grey;
}
.radio-group label{
border-color: yellow;
color: darkblue;
}
.radio-group input[type="radio"]:checked {
color: darkblue;
}
input:first-of-type {
border-radius: 30%;
}
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/17.5 Safari/605.1.15
Challenge Information:
Build a Job Application Form - Build a Job Application Form