数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 移除 select 输入框的背景
HTML 表单元素的默认样式通常会显得有些单调乏味。其中一个经常需要重新设计的元素是选择输入框（select input），它用于向用户呈现一个选项列表供选择。本文将向您展示如何使用 CSS 移除 select 输入框的默认背景。
通过这样做，您可以自定义选择输入框的外观，使其更具视觉吸引力，并与网站或应用程序的整体设计相一致。
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 标签提供了名称和 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作为 select 框的容器。然后设置宽度限制并隐藏溢出，并使 select 框的宽度略小于容器div。这样，默认样式的箭头将从网页中消失。
请注意，与本文中所做的一样，针对单个标签，大多数开发人员使用 ID 和类来创建通用样式，这样在发生类似情况时，我们就不必重复代码。
结论
本文讨论了移除 CSS 中输入背景问题的解决方案。在此过程中，我们了解了输入、它们的类型、输入的默认样式及其状态。我们还了解了如何使用伪类选择器定位元素的特殊状态。
5K+ 阅读量
