如何在CSS中移除選擇輸入框的背景-html教學-PHP中文網

首頁

web前端

html教學

如何在CSS中移除選擇輸入框的背景

王林

Aug 27, 2023 pm 07:01 PM

css移除背景輸入框背景移除去除選擇器背景

如何在CSS中移除選擇輸入框的背景

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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。