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

使用 CSS 选择器选择文本输入字段是一种强大且重要的工具，用于为网页上的特定元素设置样式和定位目标。文本 输入 字段是任何需要用户提供输入的网页表单的重要组成部分。

在本文中，我们有三个输入字段。其中两个是文本输入 类型，另一个是密码输入类型。我们的任务是使用 CSS 选择器 选择**文本**输入字段。

选择文本输入字段的方法

以下是使用 CSS 选择器选择文本输入字段的方法列表，我们将在本文中逐步讲解并提供完整的示例代码。

使用 type 选择器选择文本输入字段

要使用 CSS 选择器选择文本输入字段，我们将使用**type** 选择器来选择表单中的所有文本输入字段。

  • 我们使用了**"input[type="text"]"**，它选择所有输入类型为文本的输入字段。
  • 选择所有文本输入类型后，我们使用了 CSS 属性来为其应用样式。我们增加了 字体大小，添加了 边框，应用了 填充 和使用 margin-bottom 属性的底部边距。

示例

这是一个完整的示例代码，演示了上述步骤，使用**type** 选择器选择文本输入字段。此处样式将仅应用于文本输入类型，而不应用于密码输入类型。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
    input[type="text"] {
      border: 2px solid #031926;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <h3>
    Selecting Text Input Fields using CSS Selector
  </h3>
  <p>
    In this example we have used <strong>type
    </strong> selector to select text input 
    fields .
  </p>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" 
           placeholder="Enter username">
    <br>
    <label for="email">Email:</label>
    <input type="text" 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 选择器选择文本输入字段

在这种方法中，要使用 CSS 选择器选择文本输入字段，我们将使用**id** 选择器来选择表单中由 id 名称指定的文本输入字段。

  • 我们使用了**"#txt1, #txt2"**，它选择所有输入类型为文本的输入字段，并省略密码类型输入字段。
  • 我们使用了 background-color 为文本输入字段添加背景颜色，以及第一种方法中提到的其他样式。
  • 我们还使用**::placeholder**伪元素更改了占位符的文本 颜色。

示例

这是一个完整的示例代码，演示了上述步骤，使用**id** 选择器选择文本输入字段。此处样式将仅应用于文本输入类型，而不应用于密码输入类型。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
    #txt1, #txt2 {
      background-color: #04af2f;
      color: white;
      border: 1px solid #031926;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 15px;
    }
    ::placeholder {
      color: white;
    }
  </style>
</head>
<body>
  <h3>
    Selecting Text Input Fields using CSS Selector
  </h3>
  <p>
    In this example we have used <strong>id
    </strong> selector to select text input 
    fields .
  </p>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="txt1" name="name" 
           placeholder="Enter username">
    <br>
    <label for="email">Email:</label>
    <input type="text" id="txt2" 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>

使用 class 选择器选择文本输入字段

在这种方法中，要使用 CSS 选择器选择文本输入字段，我们将使用**class** 选择器来选择表单中的所有文本输入字段。

  • 我们使用了**".txt"**，它选择所有输入类型为文本的输入字段，并省略密码类型输入字段。
  • 选择文本类型输入字段后，我们应用了与第一种和第二种方法相同的样式来设计文本输入字段。

示例

这是一个完整的示例代码，演示了上述步骤，使用**class** 选择器选择文本输入字段。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
    .txt {
      background-color: #04af2f;
      color: white;
      border: 1px solid #031926;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 15px;
    }
    ::placeholder {
      color: white;
    }
  </style>
</head>
<body>
  <h3>
    Selecting Text Input Fields using CSS Selector
  </h3>
  <p>
    In this example we have used <strong>id
    </strong> selector to select text input 
    fields .
  </p>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" 
           placeholder="Enter username" class="txt">
    <br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" 
           placeholder="Enter Email ID" class="txt">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           placeholder="Enter your Password" class="pswd">
    <br>
  </form>
</body>
</html>

使用属性选择器选择文本输入字段

在这种方法中，要使用 CSS 选择器选择文本输入字段，我们将使用**属性**选择器来选择表单中的文本输入字段。

  • 我们使用了**"input[name="usrname"]"**，它选择具有 name 属性值为“usrname”的输入字段，并省略密码类型输入字段。
  • 选择文本类型输入字段后，我们应用了与第一种和第二种方法相同的样式来设计文本输入字段。

示例

这是一个完整的示例代码，演示了上述步骤，使用**属性**选择器选择文本输入字段。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      text-align: center;
    }
    input[name="usrname"] {
      border: 2px solid #031926;
      padding: 12px;
      font-size: 18px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <h3>
    Selecting Text Input Fields using CSS Selector
  </h3>
  <p>
    In this example we have used <strong>type
    </strong> selector to select text input 
    fields .
  </p>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="usrname" 
           placeholder="Enter username">
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           placeholder="Enter your Password">
    <br>
  </form>
</body>
</html>

结论

使用 CSS 选择器选择文本输入字段是一个简单的过程，我们已经了解了实现此目的的四种不同方法：使用**type** 选择器、**id** 选择器、**class** 选择器和**属性**选择器。

更新于：2024-09-06

6K+ 次浏览

启动您的 职业生涯

完成课程后获得认证

开始学习
广告