Tell us what’s happening:
hi im stucked at
18. 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 have checked with associated label still cannot pass the test
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<form>
<div class="form-container">
<div class="form-control">
<label for="name">Full Name</label>
<input id="name" type="text" placeholder="Enter Full Name" required >
</div>
<div class="form-control">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email Address" required>
</div>
<div class="form-control">
<label for="position">Job Position</label>
<select id="position" required>
<option >-- Select Your Position--</option>
<option>Web Developer</option>
<option>Front-end Developer</option>
<option>Backed-end Developer</option>
<option>Software Developer</option>
</select>
</div>
<div class="form-control">
<label for="status">Availability</label>
<section class="radio-group">
<input id="full-time" type="radio" name="availability" class="radio-group" value="full-time"><label for="full-time">Full-Time</label>
<input id="part-time" type="radio" name="availability" class="radio-group" value="part-time"><label for="part-time">Part-Time</label>
<input id="contract" type="radio" name="availability" class="radio-group" value="contract"><label for="contract">Contract</label>
</section>
</div>
<div class="form-control">
<label for="message">Describe Skills</label>
<textarea id="message" placeholder="Enter Your Message Here" rows="10" cols="30"></textarea>
</div>
<div class="btn-container">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
max-width: 900px;
margin: 0px auto;
}
.container{
max-width: 600px;
padding: 20px;
margin: 0px auto;
margin-top: 50px;
border: 1px solid rgba(235, 232, 232, 0.3);
background: rgba(255, 255, 255, 1);
box-shadow: 0 4px 30px rgba(0,0,0,0.3);
border-radius: 40px;
}
}
.apply-box{
max-width: 600px;
padding: 20px;
margin: 0px auto;
margin-top: 50px;
border: 1px solid rgba(235, 232, 232, 0.3);
background: rgba(255, 255, 255, 1);
box-shadow: 0 4px 30px rgba(0,0,0,0.3);
border-radius: 40px;
}
.form-container{
margin-top: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.form-control{
display: flex;
flex-direction: column;
}
label{
font-size: 15px;
margin-bottom: 5px;
}
input,select, textarea,section{
padding: 6px 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 15px;
}
input:focus, textarea:focus{
border-color: navy;
outline: none;
}
input:valid, select:valid, textarea:valid{
border-color: green;
}
input:invalid, select:invalid, textarea:invalid{
border-color: red;
}
button{
background-color: royalblue;
border: 2px solid transparent;
color: #ffff;
padding: 5px;
font-weight: 400px;
border-radius: 5px;
transition: 0.2s ease;
}
button:hover{
transform: scale(1.07);
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
background-color: rgb(35, 67, 156);
}
button:active{
transform: scale(0.95);
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
background-color: rgb(152, 170, 221);
}
.radio-group input[type="radio"]{
display: none;
}
.radio-group label{
margin-right: 1px;
padding: 1px 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: 0.2s ease;
}
.radio-group input[type="radio"]:checked {
border: 1px solid brown;
background-color: rgb(105, 71, 71);
box-shadow: 0 0 3px rgba(0,0,0,1);
}
.radio-group input[type="radio"]:checked + label{
background-color: rgb(105, 71, 71);
box-shadow: 0 0 3px rgba(0,0,0,1);
color: #ffff;
}
input:first-of-type{
border-radius: 5px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36 Edg/145.0.0.0
Challenge Information:
Build a Job Application Form - Build a Job Application Form
