Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Can anyone describe why I can’t get 15. to pass?:

  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.

I am baffled after extension internet searching and scouring the forums for a solution.

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">
        </input>
        <input type="email" id="email">
        </input>
        <select id="position">
            <option>
                </option>
                <option>
                </option>
            </select>
            <fieldset class="radio-group" name="availability">
                <textarea id="message">
                    </textarea>
                <input  id="full" type="radio" name="availability">
                </input>
                <label for="full"></label>
                <input id="part-time" type="radio" name="availability">
                </input>
                <label for="part-time"></label>
                </fieldset>
                <button type="submit">
                    </button>
        </form>
    </div>

</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
  border-color: orange;
}

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

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

button:hover {
  background-color: purple;
}

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

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

input:first-of-type {
background-color: #f0f0f0;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

1 Like
2

how are you selecting the associated label in your css?

1 Like
3

by using ‘label’. I’ve also tried using label[for=full]:checked, and that doesn’t seem to work either. All examples I am seeing online are exactly what I am trying, but none seem to pass.

1 Like
4

Can a label be checked? Or only the radio button?

1 Like
5

I do not understand the question.

1 Like
6

This says, literally, look for a label that has been checked. Can you “check” a label element, or is that something that you do to the radio button?

1 Like
7

if that is the case, then wouldn’t:

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

already be the “checked” it is looking for?

I am struggling on another project where I have to style a label. I must not understand how to style a label element properly. If it is not styled like every other element, that would be why I am struggling.

1 Like
8

This is targeting an input radio button that has been checked. That is something that can be checked, which is why this works. But this doesn’t say anything about the associated label.

1 Like
9

I do not understand how to use input[type=“radio”]:checked to change the style of the associated label.

On another project, I am using

label {
  text: blue;
  margin: 20px;
}

and it is also not styling the label at all. I am at a loss as to what is to be done. Researching online has not brought me any solutions to my problem.

Can you explain with an example on how to properly style it?

1 Like
10

You don’t, because that is a selector for a radio button and not a label. You need a selector for the associated label. That syntax is part of it but not all of it.

I put “style label when input checked” into a search engine and got several results. I’m seeing several similar results. What pages did you find?

2 Likes
11

I reviewed this one: :checked - CSS: Cascading Style Sheets | MDN
and used that format and still did not pass.

1 Like
12

in what way are you selecting the label? the link you posted alone describes how to select the checked input, to select the associated label you need something more

1 Like
13

I guess I would need to see an example of the correct usage to understand what needs to be done for my specific project.

1 Like
14

Did you use the exact same search engine term I used?

1 Like
15

Yes, I have looked at stack overflow and MDN website for those results. I tried to mimic what MDN shows as an example, and it still did not pass.

1 Like
16

can you show what you tried?

please remind yourself that input elements do not want a closing tag

1 Like
17

Like we said above, that is still not the correct page to use.

1 Like
18

I am at a loss for what needs to be done. I have 2 projects that I am stumped on for this same type of check on a label.

1 Like
19

What did you try more recently? I can’t just write the code for you as that’s against the rules, so I need something to work with.

I would use the literal first result for this search term here:

1 Like