Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

i cant do number 14, i cant write a background-color or border in my radio input and i think im not suposed to,
im very confused
sorry for my english

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
    <form>
        <input type="text" id="name">
        <input type="email" id="email">
        <select id="position">
            <option>teste1</option>
            <option>teste2</option>
            <option>teste3</option>
            </select>
            <fieldset class="radio-group">
                <label for="radio1">teste<input type="radio" id="radio1" name="availability">
                <label for="radio2" >teste2<input type="radio" id="radio2" name="availability">
            </fieldset>
            <textarea id="message"></textarea>
            <button type="submit">submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */


input:valid,select:valid,textarea:valid{
  border:2px solid green
}
input:invalid,select:invalid,textarea:invalid{
  border:2px solid red
}
input:focus,textarea:focus{border:2px solid yellow ;outline:none}
button:hover{background-color:orange}

.radio-group input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
  outline: 1px solid red;
  accent-color:red;
}

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

2

Hi.
Read the instructions again, you’re missing some properties that are required.

to add a border color, background color and a box shadow
4

i used border color and background-color on this selector:
.radio-group input[type=“radio”]:checked
but it didnt work only box-shadow worked

5

You used the wrong properties then. Here are some references to aid:

6

image
image1366×607 78.4 KB

look,dosent work



input:valid,select:valid,textarea:valid{
  border:2px solid green
}
input:invalid,select:invalid,textarea:invalid{
  border:2px solid red
}
input:focus,textarea:focus{border:2px solid yellow ;outline:none}
button:hover{background-color:orange}

.radio-group input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
  background-color:  red;
  border-color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
    <form>
        <input type="text" id="name">
        <input type="email" id="email">
        <select id="position">
            <option>teste1</option>
            <option>teste2</option>
            <option>teste3</option>
            </select>
            <fieldset class="radio-group">
                <label for="radio1">teste<input type="radio" id="radio1" name="availability">
                <label for="radio2" >teste2<input type="radio" id="radio2" name="availability">
            </fieldset>
            <textarea id="message"></textarea>
            <button type="submit">submit</button>
    </form>
</div>
</body>
</html>
7

please post your updated code

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

8

i’ve edited the messege before to include my code

9

im still stuck at the course because of this :frowning:

10

i have ve used that ones but still nothing im stuck in the course for days :frowning:

11

Let me see your adjusted code.

13

what do you mean by adjusted? ive sended the code before updated

14

Hi,
You’re stuck at steps 15 and 16. Have you done anything about those?
Step 15 for example wants you to change the color of the label elements when the radio buttons associated with those labels are selected.

15

Im stuck até 14 the background-color nor borderô color apply

16

what is your latest code?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

17 
input:valid,select:valid,textarea:valid{
  border:2px solid green
}
input:invalid,select:invalid,textarea:invalid{
  border:2px solid red
}
input:focus,textarea:focus{border:2px solid yellow ;outline:none}
button:hover{background-color:orange}

.radio-group input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
  background-color:  red;
  border-color:green;
}```
18

image
image1920×919 113 KB

ive noticed now 14 shows as correct but
the button is still blue why? if i used this proprieties:
background-color:red;
border-color:green;

19

Hi again,
Radio buttons work that way. Changing the background-color and border properties won’t change anything in most browsers. But it can be changed if you do a little more editing of the radio buttons in css. Right now, it’s not an error on your part.

1 Like
20

you do not have a selector for the label elements