Tell us what’s happening:
I have spent about 2 hours now working on 15 and I still can’t get it. Can you help me? Also, do you know which video the answer is in with an example because I have tried everything. Each time I try doing the same class over as in .radio-group:checked and just adding +label, I still get it wrong. But I am not sure what else to try.
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 href="styles.css" href="stylesheet">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<form>
<label for="name">Name</label>
<input type="text" id="name" placeholder="Full Name"><BR>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Example name@example.com"><br>
<label for="select">Position</label>
<select name="select" id="position">
<option value="option1">Emperor</option>
<option value="option2">King</option>
<option value="option3">Soldier</option>
</select><BR>
<p>Availability</p>
<fieldset class="radio-group">
<label for="full" class="full">Full Time</label>
<input id="full" type="radio" name="availability" />
<label for="part" class="part">Part Time</label>
<input id="part" type="radio" name="availability" />
</fieldset>
<label for="comments">Leave Your Comments</label><br>
<textarea cols="30" rows="10" name="comments" id="message"></textarea><br>
<button type="submit" id="submit">Submit</button>
</div>
</body>
</html>
/* file: styles.css */
body {
font-family: arial;
line-height: 2rem;
font-size: 1.0rem;
}
label {
font-weight: bold;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
.container {
display: block;
padding: 10px;
}
input {
width: 100%
}
input:focus, textarea:focus {
border-color: green;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: orange;
}
.radio-group input[type="radio"]:checked+label{
color:orange;
appearance:none;
}
.radio-group input[type="radio"]{
appearance: none;
width: 20px;
height: 20px;
border: 2px solid black;
outline: none;
background-color: white;
cursor: pointer;
}
.radio-group input[type="radio"]:checked{
box-shadow:2px 3px black;
background-color:yellow;
border-color:purple;
}
input:nth-child(1){
border-radius:20px;
}
label:checked{
color: green;
}
select {
width: 100%;
height: 2rem;
margin: auto;
}
textarea {
width: 100%;
}
button {
width: 100%;
background-color: green;
color: white;
font-size: 1.5rem;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0
Challenge Information:
Build a Job Application Form - Build a Job Application Form