Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I’m so confused… I’ve searched, watched videos, I don’t know what I’m doing wrong with user story 15. I can’t seem to pass it. Please help!

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 id="job-application">
        <label for="name">Full Name:</label>
        <input type="text" id="name" placeholder="Enter your name" required></input>
        <label for="email"></label>
        <input type="email" id="email" placeholder="Enter your email" required></input>
       <label for="position">Position</label>
        <select id="position" required>
            <option value="">Select a Position</option>
            <option value="developer">Developer</option>
            <option value="designer">Designer</option>
            <option value="manager">Manager</option>
        </select>
        <fieldset class="radio-group">
            <legend>Availability</legend>
            <input type="radio" name="availability" value="fulltime">
            <label for="fulltime">Full Time</label>
            <input type="radio" name="availability" value="parttime">
            <label for="parttime">Part Time</label>
        </fieldset>
        <label for="message">Why do you want this job?</label>
        <textarea id="message" class="message" rows="5" placeholder="Write your motivation" required></textarea>
        <button type="submit">Submit Application</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
body{
  fontstyle: Arial, san-serif;
  background-color: slategrey;
  padding:20px;

}

.container {
  max-width: 600px;
  background-color: white;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0. 0.1);
}

label {
  display: block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}

input, select, textarea {
  width: 100%
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.radio-group {
  display: flex;
  align-items: center;
  margin-top: 15px;
}

.radio-group input[type="radio"]{
  appearance:none; 
  width: 30px;
  border-radius:50%;
  outline: none;
  border:2px solid green;
}
button{
  width: 100%;
  padding: 10px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

input:focus, textarea:focus{
border: 2px solid midnightblue;
outline: none;
}

input:invalid, select:invalid, textarea:invalid{
  border-color: red;
}

input:valid, select:valid, textarea:valid{
  border-color: green
}

button:hover{
  background-color: gray;
}

.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white;
}

.radio-group input[type="radio"]:checked + label{
  color: blue;
}

input:first-of-type{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

User story 15 is

Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

I started by putting “label css when radio button checked” into a search engine and the first search result looked useful to me

Does that first result help?

I suspect you found something similar but you don’t quite have the correct CSS selector.

3

Hi @Alexshmalex

  1. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

How are the two elements associated?

Also, I noticed the fonts do not display correctly. Check out the article about the font-style property.

Happy coding

4

thanks for trying. I’ll keep searching. I appreciate the help.

5

thanks for the tip on font-style, I didn’t even notice that. still stuck on 15 though, I’ll keep trying

1 Like
6

make sure you associate the label element and the input element, you did not do that in the code you posted

if you still need help and have updated code, please post again your code