資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 移除 select 輸入框的背景
HTML 表單元素的預設樣式通常會顯得有些單調乏味。其中一個經常需要重新設計的元素是選擇輸入框（select input），它用於向用戶呈現一個選項列表供選擇。本文將向您展示如何使用 CSS 移除 select 輸入框的預設背景。
透過這樣做，您可以自定義選擇輸入框的外觀，使其更具視覺吸引力，並與網站或應用程式的整體設計相一致。
CSS 中的各種輸入欄位
讓我們首先了解一些基本知識，在解決這個問題之前我們需要掌握這些知識。首先我們需要知道，網頁中的輸入是什麼？網站上任何使用者可以輸入和提交資料的可互動部分都稱為網站的輸入欄位。
HTML 提供了不同型別的輸入。例如，文字區域、單選按鈕、選擇選項等。預設情況下，這些輸入的樣式各不相同。在很多情況下，我們需要使用自定義樣式來提升網站的影響力，使其脫穎而出。
下面給出一些網站中使用的輸入欄位的常見示例。
<form action="someAction"> <label for="YourName">Your First name:</label> <input type="text" id="YourName" name="YourName"><br><br> <label for="YourLastName">Your Last name:</label> <input type="text" id="YourLastName" name="YourLastName"><br><br> <input type="submit" value="Submit"> </form>
第二件事我們需要了解的是這些輸入的“狀態”。當我們與輸入欄位互動以輸入一些資料時，輸入欄位被稱為處於“活動”狀態，但如果輸入欄位未被觸碰，則被稱為處於“非活動”狀態。另一種描述它們的方式是“聚焦”和“未聚焦”狀態。預設情況下，所有輸入都處於未聚焦狀態。
移除背景 現在我們可以開始解決這個問題了。CSS 為我們提供了各種“偽類”來定位某些輸入欄位的不同或特殊狀態。其中一個類是 focus 偽類。它應用於網站上“聚焦”的元素，這意味著使用者透過鍵盤或滑鼠點選與該元素進行互動。我們將使用這個偽類，以便在聚焦狀態下移除輸入背景。為此，我們將把預設樣式更改為有助於實現我們目標的樣式。
但這僅適用於使用者輸入的輸入型別。大多數情況下，網站包含下拉列表，其中包含一些預先存在的選項供您選擇，使用者可以從中選擇一個或多個選項。
與所有其他表單輸入一樣，它也是一個輸入欄位，並具有與其關聯的預設樣式。我們可以使用 html 中的 select 標籤建立自定義下拉列表。它主要用於表單中收集使用者資料。下面給出了一個使用 select 標籤的下拉列表示例。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
</head>
<body>
<form id="contactForm" method="POST" action="">
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
在上面的示例中，我們為 select 標籤提供了名稱和 ID。name 屬性用於在使用者提交後引用它，而 id 屬性用於訪問提交後將傳送的資料。為了提供使用者可供選擇的選項，我們使用 option 標籤。我們還可以使用其他一些屬性使列表更易訪問和更具區分度。
示例
在下面的示例中，我們可以使用 –webkit-appearance : none 完全移除背景。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
<style>
.form-control:focus,
.form-control:active {
background: transparent;
}
#movies,
#movies:focus,
#movies:active {
background: none;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form id="contactForm" method="POST" action="">
<input
name="YourName"
type="text"
class="someClass"
placeholder="Can you please tell me your name :)"
required
/>
<br />
<input
name="YourEmail"
type="email"
class="someClass"
placeholder="Your email please :)"
/>
<br />
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
我們可以注意到，上面示例的視覺輸出有所不同，並且其中沒有預設的灰色背景顏色。另一種不太直觀的方法是使用一個div作為 select 框的容器。然後設定寬度限制並隱藏溢位，並使 select 框的寬度略小於容器div。這樣，預設樣式的箭頭將從網頁中消失。
請注意，與本文中所做的一樣，針對單個標籤，大多數開發人員使用 ID 和類來建立通用樣式，這樣在發生類似情況時，我們就不必重複程式碼。
結論
本文討論了移除 CSS 中輸入背景問題的解決方案。在此過程中，我們瞭解了輸入、它們的型別、輸入的預設樣式及其狀態。我們還了解了如何使用偽類選擇器定位元素的特殊狀態。
5K+ 閱讀量
