Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

How to set the value of the first option of a selector to invalid?I don`t know how to do it like the example does

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">
      <h1>Job Application Form</h1>
      <form action="">
        <label for="name" class="label">Full Name:</label>
        <input
          id="name"
          type="text"
          name="name"
          placeholder="Enter your name"
          required
        />
        <label for="email" class="label">Email:</label>
        <input
          id="email"
          type="email"
          name="email"
          placeholder="Enter your email"
          required
        />
        <label for="position" class="label">Position:</label>
        <select id="position" name="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 id="selection1" type="radio" name="availability" checked />
          <label for="selection1">Full-Time</label>
          <input id="selection2" type="radio" name="availability" />
          <label for="selection2">Part-Time</label>
        </fieldset>
        <label for="message" class="label">Why do you want this job?</label>
        <textarea
          id="message"
          name="message"
          placeholder="Write your motivation"
          required
        ></textarea>
        <button type="submit">Submit Application</button>
      </form>
    </div>
</body>
</html>

/* file: styles.css */
#message {
  min-height: 100px;
  margin-bottom: 10px;
}

/*表单容器设定*/
.container {
  max-width: 80%;
  border-radius: 5px;
  box-shadow: 0 5px 10px rgb(202, 202, 202);
  margin: 0 auto;
  padding: 20px;
  
}

.label {
  font-weight: bold;
}

.radio-group {
  padding-bottom: 20px;
}
/*针对名字和邮箱以及评论输入框的状态样式书写*/
input:focus,
textarea:focus {
  border: 1px solid yellow;
}

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

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

/*没想到的⬇️*/
/*针对单选按钮的样式设定*/

.radio-group input[type="radio"] {
  margin-right: 5px;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition:border 0.3s ease ;
}

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

input[type="radio"]:checked + label {
  color: green;
  cursor: pointer;
}

/*没想到的⬆️*/

/*提交按钮样式*/
button:hover {
  cursor: pointer;
  background-color: black;
}

button {
  border: hidden;
  border-radius: 2px;
  width: 100%;
  color: white;
  background-color: green;
  padding: 10px;
}

body {
  font-family: Arial, sans-serif;
  padding-top: 20px;
}

h1 {
  text-align: center;
}
/*解决输入框溢出问题以及设定样式*/
:where(#name, #position, #email, #message) {
  border-radius: 2px;
  padding: 10px;
  width: 100%;
  margin: 5px 0px 10px 0px;
  box-sizing: border-box;
}
/*为什么输入框的右外边距设定没用*/

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

image
image1025×129 2.92 KB

image
image937×131 3.78 KB

3

First pic is mine Second is from the example :jack_o_lantern:

4

Hi,
The error tells you to add a :first-of-type pseudo-class to the input elements to style the first input field differently. You add the pseudo-class in the css file. Have you tried doing that?

5

I know this rule for passing the test but my question is different

6

try making the value empty

7

image
image1157×125 22.6 KB

Thanks it works i thought “space” is empty. damn it…

8

unfortunately a space is still a character

1 Like