Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Hello There

Can anyone help me?

I am getting this error although i have tried many different styles but it wont work.

  1. You should use the :checked pseudo-class on .radio-group input[type=“radio”] to add a border color, background color and a box shadow when the radio button is selected.

Thanks in advance.

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>
            <input type="text" id="name" placeholder="Full Name" required>
            <input type="email" id="email" placeholder="Email Address" required>
            <select id="position" required>
                <option value="" disabled selected>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" id="full-time" name="availability" value="full-time" required>
                <label for="full-time">Full-Time</label>
                <input type="radio" id="part-time" name="availability" value="part-time">
                <label for="part-time">Part-Time</label>
                <input type="radio" id="contract" name="availability" value="contract">
                <label for="contract">Contract</label>
            </fieldset>

            <textarea id="message" placeholder="Enter your message here" required></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>


/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

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

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

input:focus, textarea:focus {
    border-color: #007BFF;
    outline: none;
}

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

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

.radio-group {
    margin-bottom: 15px;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.radio-group input[type="radio"]:checked + label {
    border-color: #007BFF;
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

textarea {
    resize: vertical;
}

button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

input:nth-child(1) {
    border-radius: 8px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hello,
the problem lies in this CSS selector
.radio-group input[type="radio"]:checked + label, this selector selects a label element if it immediatley follows a checked radio button, but will not select the checked radio buttons so the styles are only applied to the label element. Therefore, you have to create two CSS selectors, one for the checked radio buttons and one for the label elements

3 Likes
3

Hello @constantcode9909

Great. thank you for your help. It worked

5

hi @piggyprinsess007

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

6

How would you make a css selector for the label

7

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.