如何使用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 formers requirequires 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 in v. 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>