如何在 CSS 中移除选择框的输入框背景

htmlcssweb developmentfront end technology更新于 2025/1/7 22:36:17

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 为我们提供了各种"伪类"来针对某些输入字段的不同或特殊状态。其中一种伪类是 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 标签提供了一个 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 和类来创建通用样式，这样我们不必在类似情况发生时重复编写代码。