如何使用CSS选择器选择文本输入字段？-css教程-PHP中文网

首页

web前端

css教程

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

王林

Aug 26, 2023 pm 03:41 PM

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

Selecting text input fields using CSS selectors is a powerful and crucial tool for styling and targeting the specific elements on the webpage. Text input fields are an essential part of any web form that requires users to provide input. As a web developer or designer, we may need to select text input fields using CSS selectors to apply styling to them. If we want to change the font color, background color, or add custom styles to the input fields, it is important to understand how to select them using CSS selectors.

文本输入字段的结构

在使用CSS选择器选择文本输入字段之前，了解其结构非常重要。文本输入字段通常由一个HTML元素表示，其type属性设置为"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="输入用户名" 设置一个占位文本，显示在输入框内，以便给用户一个输入的提示。

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

在网页上选择所有文本输入字段的简单方法是使用元素选择器。文本输入字段是允许用户输入文本的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 id="Selecting-text-input-fields-using-type-attribute">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样式应用于这三个输入框。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 id="Selecting-text-input-fields-using-ID-attribute">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属性的值。例如，如果我们有多个class属性设置为"input-field"的HTML元素，我们可以使用以下CSS选择器来选择它们 -

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

这个选择器针对所有具有class属性设置为"input-field"的HTML元素。

示例3：使用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 id="Selecting-text-input-fields-using-ID-attribute">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>