資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告