Build a Job Application Form - Build a Job Application Form

magiclovett · January 4, 2026, 9:19am

Tell us what’s happening:

Hello, i don’t know why, the tests are some failing and it says it’s wrong when it is not. Thanks!

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">
    <title>Job Application Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div class="container">
        <h1>Apply to job application form</h1>
        <form>
            <label for="name">Name:</label>
            <input 
            required
            type="text" placeholder="Eg: John Due" name="name" id="name">
            <label for="email">Email:</label>
            <input 
            required
            placeholder="Eg: example@test.com" type="email" name="email" id="email">
            <label for="position">Position:</label>
            <select 
            required
            name="position" id="position">
                <option value="" 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>
                <label for="full-time"
                >Full-time</label>
                <input
                checked
                type="radio" id="full-time" name="availability" value="full-time">
                <label for="part-time">Part-time</label>
                <input type="radio" id="part-time" name="availability" value="part-time">
            </fieldset>
            <label for="about-user">Tell us about you?</label>
            <textarea 
            placeholder="Write something about yourself..."
            required
            name="message" id="message"></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

body {
    color: whitesmoke;
    background-color: rgb(73, 57, 57);
}


select,
textarea,
input:not(input[type="radio"]) {
    border-radius: 5px;
    width: 100% !important;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 5px;
    background-color: rgb(73, 57, 57);
}

input:focus,textarea:focus{
    border:1px solid rgb(255, 183, 0);
}

input,
input::placeholder,
textarea,
textarea::placeholder,
select {
    color: whitesmoke;

}

.container {
    background-color: #14795f;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    margin: 20px auto;
    padding: 10px 20px;
    box-shadow: 0 5px 15px black;
}

input:first-of-type {
    border-radius: 20px;
}

input:focus,
textarea:focus {
    border: 2px solid rgb(131, 82, 82);
    outline: none;
}

input:invalid,
select:invalid,
textarea:invalid {
    border: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
    border: 2px solid green;
}

label:not(fieldset label) {
    display: block;

}

.radio-group {
    margin-bottom: 20px;
    border: 1px solid white;
    border-radius: 5px;
    padding: 20px;
}

.radio-group input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid gray;
    vertical-align: bottom;
    border-radius: 50%;
    transition: all 0.7s ease;
}

.radio-group input::before {
    display: block;
    content: " ";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(3px, 3px) scale(0);
    transition: all 0.3s ease-in;
}

.radio-group input[type="radio"]:checked {
    border: 1px solid gray;

}

.radio-group input:checked::before {
    transform: translate(3px, 3px) scale(1);
    background-color: rgb(135, 247, 135);

}

h1 {
    text-align: center;
}

button {
    display: block;
    margin: auto;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 20px;
    transition: all 0.7s ease;
    background-color: rgb(39, 39, 95)
}

button:hover {
    background-color: rgb(40, 40, 126);
    scale: 1.2;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

JeremyLT · January 4, 2026, 9:31am

What tests are failing?

How have you convinced yourself that that part of your code is absolutely perfect?

magiclovett · January 4, 2026, 9:32am

The tests failing are:16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected.

Failed: 17. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a box shadow when the radio button is selected.

Failed: 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.

JeremyLT · January 4, 2026, 9:34am

Can you answer both questions please?

magiclovett · January 4, 2026, 9:35am

What do you mean with the second one?

JeremyLT · January 4, 2026, 9:37am

You seem convinced your code must be perfect. Why?

magiclovett · January 4, 2026, 9:39am

I see that the rules are applyed, ez:`.radio-group input[type=“radio”]:checked {
border: 1px solid gray;

}`

JeremyLT · January 4, 2026, 9:40am

Do you have anything applied to the radio buttons the user stories did not request? (Like almost a full second delay to apply changes?)

magiclovett · January 4, 2026, 10:10am

Yes, the animation, i hate not having anuimatins

JeremyLT · January 4, 2026, 10:11am

Ok, but adding things the instructions don’t ask for can break the tests.

magiclovett · January 4, 2026, 10:17am

Now i have this css code

body {
    color: whitesmoke;
    background-color: rgb(73, 57, 57);
}


select,
textarea,
input:not(input[type="radio"]) {
    border-radius: 5px;
    width: 100% !important;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 5px;
    background-color: rgb(73, 57, 57);
}

input:focus,textarea:focus{
    border:1px solid rgb(255, 183, 0);
}

input,
input::placeholder,
textarea,
textarea::placeholder,
select {
    color: whitesmoke;

}

.container {
    background-color: #14795f;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    margin: 20px auto;
    padding: 10px 20px;
    box-shadow: 0 5px 15px black;
}

input:first-of-type {
    border-radius: 20px;
}

input:focus,
textarea:focus {
    border: 2px solid rgb(131, 82, 82);
    outline: none;
}

input:invalid,
select:invalid,
textarea:invalid {
    border: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
    border: 2px solid green;
}

label:not(fieldset label) {
    display: block;

}

.radio-group {
    margin-bottom: 20px;
    border: 1px solid white;
    border-radius: 5px;
    padding: 20px;
}

.radio-group input {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid gray;
    vertical-align: bottom;
    border-radius: 50%;
}

.radio-group input::before {
    display: block;
    content: " ";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(3px, 3px) scale(0);
}

.radio-group input[type="radio"]:checked {
    border: 1px solid gray;

}

.radio-group input:checked::before {
    transform: translate(3px, 3px) scale(1);
    background-color: rgb(135, 247, 135);

}

h1 {
    text-align: center;
}

button {
    display: block;
    margin: auto;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 20px;
    background-color: rgb(39, 39, 95)
}

button:hover {
    background-color: rgb(40, 40, 126);
    scale: 1.2;
}

but * Failed: 16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected.

Failed: 17. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a box shadow when the radio button is selected.

Failed: 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. Are still wrong

JeremyLT · January 4, 2026, 10:19am

Ok. What debugging have you tried with this version?

Is there anything else you added the instructions did not request?

JeremyLT · January 4, 2026, 10:19am

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

magiclovett · January 4, 2026, 10:30am

Changing the appearance of the radio buttons?

JeremyLT · January 4, 2026, 10:32am

I would start with the styling for the failing element, yes

magiclovett · January 4, 2026, 10:35am

body {
    color: whitesmoke;
    background-color: rgb(73, 57, 57);
}


select,
textarea,
input:not(input[type="radio"]) {
    border-radius: 5px;
    width: 100% !important;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 5px;
    background-color: rgb(73, 57, 57);
}

input:focus,textarea:focus{
    border:1px solid rgb(255, 183, 0);
}

input,
input::placeholder,
textarea,
textarea::placeholder,
select {
    color: whitesmoke;

}

.container {
    background-color: #14795f;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    margin: 20px auto;
    padding: 10px 20px;
    box-shadow: 0 5px 15px black;
}

input:first-of-type {
    border-radius: 20px;
}

input:focus,
textarea:focus {
    border: 2px solid rgb(131, 82, 82);
    outline: none;
}

input:invalid,
select:invalid,
textarea:invalid {
    border: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
    border: 2px solid green;
}

label:not(fieldset label) {
    display: block;

}

.radio-group {
    margin-bottom: 20px;
    border: 1px solid white;
    border-radius: 5px;
    padding: 20px;
}



.radio-group input[type="radio"]:checked {
    border: 1px solid gray;

}

h1 {
    text-align: center;
}

button {
    display: block;
    margin: auto;
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 20px;
    transition: all 0.7s ease;
    background-color: rgb(39, 39, 95)
}

button:hover {
    background-color: rgb(40, 40, 126);
    scale: 1.2;
}

STill, it fails the tests

JeremyLT · January 4, 2026, 10:39am

Where are you adding the background color and box shadow when checked?

magiclovett · January 4, 2026, 10:41am

Here
.container { background-color: #14795f; width: 80%; max-width: 600px; border-radius: 10px; margin: 20px auto; padding: 10px 20px; box-shadow: 0 5px 15px black; }

JeremyLT · January 4, 2026, 10:41am

And that is only applied when the checkbox is checked, and using the selector the tests require?

magiclovett · January 4, 2026, 10:43am

I don’t understand what do u mean by And that is only applied when the checkbox is checked,

Topic		Replies	Views
Build a Job Application Form - Build a Job Application Form HTML-CSS	10	261	November 22, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	4	153	October 30, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	15	437	October 13, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	4	103	November 27, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	6	75	November 11, 2025

Build a Job Application Form - Build a Job Application Form

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics