如何使用 CSS 选择器选择文本输入字段?

cssweb developmentfront end technology更新于 2024/3/19 11:24:17

使用 CSS 选择器选择文本输入字段是设置样式和定位网页上特定元素的强大而关键的工具。文本输入字段是任何需要用户输入的 Web 表单的重要组成部分。作为 Web 开发者或设计师，我们可能需要使用 CSS 选择器选择文本输入字段并为其应用样式。如果我们想要更改字体颜色、背景颜色或为输入字段添加自定义样式，了解如何使用 CSS 选择器选择它们非常重要。

文本输入字段的结构

在使用 CSS 选择器选择文本输入字段之前，了解其结构非常重要。文本输入字段通常由 HTML <input> 元素表示，其 type 属性设置为"text"。例如，以下 HTML 代码创建了一个文本输入字段。

<input type="text" name="user-name" id="user-id" value="initial-value" placeholder="输入用户名>

在上述代码中 -

type="text" 指定这是一个文本输入字段。
name="user-name" 设置输入字段的属性，该属性用于在表单提交时识别输入。
id="user-id" 设置输入字段的 ID 属性，该属性用于在样式和脚本编写时识别输入。
value="initial-value" 设置输入字段的初始值。这是可选的，可以保留。
placeholder="输入用户名" 设置一个占位符文本，该文本显示在输入字段内，以便用户了解要输入的内容。

使用元素选择器选择所有文本输入字段

在网页上选择所有文本输入字段的简单方法是使用元素选择器。文本输入字段是允许用户输入文本(例如姓名、电子邮件地址或密码)的 HTML 元素。这些元素通常使用"input"标签创建，并将"type"属性设置为"text"、"email"、"password"或"search"。要选择所有文本输入字段，我们可以使用以下 CSS 选择器 -

input[type="text"], input[type="email"], input[type="password"] {
/* 编写 CSS 代码 */
}

此选择器以以下方式定位所有输入字段将"type"属性设置为"text"、"email"或"password"。选择器之间的逗号表示所有选择器都将获得相同的样式。

示例 1:使用 type 属性选择文本输入字段

在此示例中，我们使用 type 属性选择器选择表单中的所有文本输入字段。CSS 样式将应用于所有具有 type="text"、type="email" 和 type="password" 属性的文本输入字段。border、padding、font-size 和 margin-bottom 样式将应用于这些输入字段。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"],
      input[type="email"],
      input[type="password"] {
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using type attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>

使用 ID 选择器选择特定的文本输入字段

我们可以使用 ID 选择器来定位特定的文本输入字段。ID 选择器由"#"字符后跟 HTML 元素 ID 属性的值表示。例如，如果我们有一个 ID 属性设置为"username"的 HTML 元素，我们可以使用以下 CSS 选择器来选择它 -

#username {
/* 在此处编写 CSS 规则 */
}

示例 2:使用 ID 属性选择文本输入字段。

在此示例中，我们使用 ID 属性选择器选择三个 ID 分别为 name、email 和 password 的文本输入字段。CSS 样式将应用于这三个输入字段。border-radius 和 background-color 样式将应用于这些输入字段。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"], input[type="email"],input[type="password"] {
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
      #name, #email{
         background-color: lightgreen;
         border-radius:10px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using ID attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>

使用类选择器选择多个文本输入字段

如果我们有多个具有相似样式或功能的文本输入字段，我们可以使用类选择器来定位它们。类选择器由"."字符后跟 HTML 元素的类属性值表示。例如，如果我们有多个类属性设置为"input-field"的 HTML 元素，我们可以使用以下 CSS 选择器来选择它们 -

.input-field {
/* 在此处编写 CSS 规则 */
}

此选择器定位所有类属性设置为"input-field"的 HTML 元素。

示例 3:使用类属性选择文本输入字段

在此示例中，我们使用类属性选择器选择三个文本输入字段，类分别为 name、email 和 password。 CSS 样式已应用于这三个输入字段。border-radius 和 background-color 样式已应用于这些输入字段。

<!DOCTYPE html>
<html>
<head>
   <style>
      body { text-align: center; }
      input[type="text"], input[type="email"], input[type="password"]{
         border: 2px solid lightgray;
         padding: 12px;
         font-size: 18px;
         margin-bottom: 15px;
      }
      .password, .search{
         background-color: lightgreen;
         border-radius:10px;
      }
   </style>
</head>
   <body>
      <h3>Selecting text input fields using ID attribute</h3>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter username"><br>
         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
         <label for="password">Password:</label>
         <input type="password" class="password" id="password" name="password" placeholder="Enter your Password"><br>
      </form>
   </body>
</html>