数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 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+ 次浏览
广告