CSS 如何去除选择框输入的背景

HTML表单元素的默认样式通常是相当枯燥和乏味的。一个经常需要进行设计改进的元素是 选择框输入 ，它用于向用户提供一个选择选项的列表。在本文中，我们将向您展示如何使用CSS去除选择框输入的默认背景。

通过这样做，您将能够自定义选择框输入的外观，使其更具视觉吸引力，并与您网站或应用程序的整体设计保持一致。

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为我们提供了各种伪类来定位某些输入字段的不同或特殊状态。其中之一是焦点伪类。它被应用于网站上“聚焦”的元素，意味着用户通过键盘或鼠标点击该元素与其交互。我们将利用这个伪类，以便在焦点状态下删除输入背景。为此，我们将把默认样式更改为帮助实现我们目标的样式。但是，这仅适用于用户输入的输入类型。往往，网站包含有一些预先存在的选项列表的下拉列表，用户可以从给定的列表中选择一个或多个。与其他输入形式一样，它也是一个输入字段，与之相关联的有一个默认样式。我们可以使用HTML的标签创建自定义下拉列表。它主要用于从用户收集数据的表单中。下面是使用标签的下拉列表的示例。示例：

<!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标签提供了一个name和一个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作为选择框的容器。然后设置一个宽度限制并隐藏溢出，并使选择框的宽度略小于容器div。这样，默认样式的箭头将从网页中消失。

请注意，与本文所做的类似，大多数开发人员使用id和class来制定通用样式，以便在类似情况发生时不必重复代码。