如何在CSS中移除選擇輸入框的背景
- 王林轉載
- 2023-08-27 19:01:18816瀏覽
HTML表單元素的預設樣式通常會有些乏味且缺乏靈感。其中一個經常需要設計改進的元素是select輸入框，它用於向使用者展示可供選擇的選項清單。在本文中，我們將向您展示如何使用CSS去除select輸入框的預設背景。
透過這樣做，您將能夠自訂選擇輸入的外觀，使其更具視覺吸引力，並與您的網站或應用程式的整體設計保持一致。
Various Inputs fields in CSS
#Let us first understand the basic knowledge that, we need to have before moving on to solving this problem. The first thing we need to know is, what are inputs in a web page? Any intractable section of the webtractables user can enter and submit data is called input field in a website.
在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為我們提供了各種「偽類」來針對某些輸入欄位的不同或特殊狀態進行定位。其中一個類別是焦點偽類。它應用於在網站上處於「焦點」狀態的元素，這意味著使用者透過鍵盤或滑鼠點擊元素與該元素進行互動。我們將利用這個偽類別，以便在焦點狀態下移除輸入背景。為此，我們將更改預設樣式以實現我們的目標。
但這僅適用於使用者輸入的輸入類型。往往，網站包含下拉列表，其中包含一些預先存在的選項列表，用戶可以從給定的列表中選擇一個或多個。
與其他輸入形式一樣，它也是一個輸入字段，並且有與之關聯的預設樣式。我們可以使用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>
In the above example, we provided the select tag a name and an id. The name attribute is for refer it after its submission by user, while the id attribute is used to access the data that will be mission. provide the options that are available for the user to choose we use the option tag. We can also use several other attributes to make the list more accessible and distinct.
Example
的中文翻譯為：範例
在下面的範例中，我們可以使用 –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>
As we can already notice that the visual output of the example above is different and does not have that default grayish toned background color in it. Another unint#uitive approachcoo be to background color in it. Another unint#uitive approachuse be to divuse a ##diver the select box. After that set a width restriction and hide the overflow, and let the select box's width be somewhat smaller than the container div. That way the default styled arrow will disappear from the webpage.##. That way the default styled arrow will disappear from the web. 請注意，與本文所做的單一標籤定位不同，大多數開發人員使用id和類別來建立通用的樣式，這樣在類似情況下就不需要重複程式碼。
Conclusion本文討論了在CSS中刪除輸入背景的問題的解決方案。在這個過程中，我們學習了輸入框、它們的類型、輸入框的預設樣式以及它們的狀態。我們也學習如何使用偽類選擇器來定位元素的特殊狀態。
以上是如何在CSS中移除選擇輸入框的背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！