Tell us what’s happening:
Good day folks,
I’m having a difficult time with step#19:
“You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”
I’ve tried 2 different browsers and several different methods of inputting this code, but I cannot get this to work.
What am I doing wrong?
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">
<link rel="styles" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<h1>Big Daddy Application Form</h1>
<div class="container">
<form>
<label for="name">Full-name</label>
<input type="text" id="name" placeholder="Enter your name">
<label for="email">E-mail</label>
<input type="email" id="email" placeholder="bigdaddy@daddy.daddy">
<label for="position">Favorite Position</label>
<select id="position">
<option default>Choose your favorite</position>
<option>Top</option>
<option>Bottom</option>
<option>Flex</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<label for="fullt">Full-time</label>
<input type="radio" name="availability" id="fullt">
<label for="partt">Part-time</label>
<input type="radio" name="availability" id="partt">
</fieldset>
<label for="message">What makes us compatible?</label>
<textarea id="message">
</textarea>
<button type="submit" name="submit-btn" id="submit-btn">I'm Ready Daddy</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body {
max-width:600px;
font-family:arial,sans-serif;
margin:auto;
padding:20px;
}
.container {
width:80%;
margin:auto;
}
h1 {
text-align:center;
padding:20px;
}
input:focus, textarea:focus {
outline:none;
border-color:navyblue;
border:4px solid pink;
}
input:invalid, select:invalid, textarea:invalid {
border-color:red;
}
input:valid, select:valid, textarea:valid {
border-color:green;
}
button:hover {
background-color:pink;
}
.radio-group input {
display:block;
}
.radio-group input[type="radio"]:checked {
border-color:navy;
background-color:blue;
box-shadow:3px 3px 8px grey;
}
input:first-of-type {
border-radius:5px;
}
.radio-group input[type="radio"]:checked + label {
color:purple;
font-weight: bold;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Job Application Form - Build a Job Application Form