Tell us what’s happening:
I can seem to pass step 12. Even after setting "input:focus, textarea: focus{ outline: none;}
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 for="name">Full Name:</label>
<input type="text" id="name" placeholder="James Uche">
<label for="email"> Email:</label>
<input type="email" id="email" placeholder="@mail.com">
<select id="position">
<option>Manager</option>
<option>RevOps Specialist </option>
</select>
<fieldset class="radio-group">
<legend>Select Availability</legend>
<input type="radio" name="availability" value="full-time" id="full-time">
<label for="full-time">Full-time</label>
<input type="radio" name="availability" value="part-time" id="part-time">
<label for="part-time">Part-time</label>
</fieldset>
<fieldset>
<label for="message">Additional Information</label>
<textarea id="message" rows="5" cols="50"></textarea>
</fieldset>
<button type="submit">Submit Form</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
input:focus,textarea:focus{border:3px solid pink; outline:none;}
input:invalid,select:invalid,textarea:invalid{border: 1px solid red}
input:valid,select:valid,textarea:valid{border: 1px solid green}
button:hover {background-color:darkblue}
.radio-group input[type="radio"]:checked{
background-color:green;
border:20px solid red;
box-shadow:0 0 3px yellow ;
}
input[type="radio"]:checked + label {color:blue ;}
input:first-of-type {border-color: orange}
Your browser information:
User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/147.0.7727.99 Mobile/15E148 Safari/604.1
Challenge Information:
Build a Job Application Form - Build a Job Application Form