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

使用CSS选择器选择文本输入字段是一种强大而关键的工具，用于对网页上的特定元素进行样式化和定位。文本输入字段是需要用户提供输入的任何Web表单的重要组成部分。作为Web开发人员或设计师，我们可能需要使用CSS选择器来选择文本输入字段以对其应用样式。如果我们想要更改字体颜色、背景颜色或向输入字段添加自定义样式，则了解如何使用CSS选择器选择它们是很重要的。

文本输入字段的结构

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

<input type="text" name="user-name" id="user-id" value="initial-value" placeholder="Enter username >

以上代码中：

type=”text” 指定这是一个文本输入框。
name=”user-name” 设置输入字段的属性，在提交表单时用于标识输入。
id=”user-id” 设置输入字段的ID属性，用于在样式和脚本中标识输入。
value=”initial-value” 设置输入字段的初始值。这是可选的，可以省略。
placeholder=”Enter username” 设置输入字段内的占位文本，以提示用户输入内容。

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

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

input[type="text"], input[type="email"], input[type="password"] {
   /* write your CSS Code */
}

这个选择器针对所有具有”type”属性设置为”text”、”email”或”password”的输入框。选择器之间的逗号表示所有选择器将接收相同的样式。

示例1：使用type属性选择文本输入框

在这个示例中，我们使用type属性选择器来选择表单中的所有文本输入框。CSS样式应用于所有具有type=”text”、type=”email”和type=”password”属性的文本输入框。这些输入框应用了边框、内边距、字体大小和下边距的样式。

<!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 {
   /* Write CSS rules here */
}

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

在这个示例中，我们使用ID属性选择器来选择具有ID的三个文本输入字段： name 、 email 和 password 。CSS样式应用于这三个输入字段。边框半径和背景颜色样式应用于这些输入字段。

<!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元素的class属性的值。例如，如果我们有多个HTML元素的class属性设置为“input-field”，我们可以使用以下CSS选择器选择它们–

.input-field {
   /* write CSS rules here */
}

该选择器会选择所有具有class属性设置为”input-field”的HTML元素。

示例3：使用class属性选择文本输入字段

在这个示例中，我们使用Class属性选择器来选择三个具有class为 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>