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中的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属性则用于访问提交后将发送的数据。为了提供可供用户选择的选项，我们使用选项标签。我们还可以使用其他几个属性来使列表更容易访问和区分。

例子

在下面的例子中，我们可以使用-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和类来做一个通用的样式，这样我们就不必在类似情况发生时重复代码。