自定义选择下拉 css only codepen

📌 相关文章

📜 自定义选择下拉 css only codepen - CSS (1)

📅 最后修改于: 2023-12-03 15:11:47.755000 🧑 作者: Mango

在开发网页时，我们常常需要使用下拉框来供用户选择。但是，许多用户界面（UI）框架提供的下拉框都比较单一，或不同UI框架之间的下拉框样式也千差万别。为了让网页更美观，我们可以尝试使用CSS定制下拉框的样式，这个过程不需要使用JavaScript。

这篇文章我们将介绍如何在CodePen上以“CSS only”方式来定制下拉框样式，下面是具体步骤：

步骤1: 创建HTML和CSS

我们首先创建一个基本的HTML结构，代码如下：

<label for="fruit">选择你喜欢的水果:</label>
<select id="fruit" name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
  <option value="mango">芒果</option>
</select>

接着，我们定义一个基本的CSS样式：

select {
  padding: 8px;
  border: none;
  font-size: 16px;
  background-color: #f2f2f2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

上面的CSS代码的效果是给下拉框设置了一些基本样式，我们将在后续步骤中进一步完善样式。

步骤2: 了解CSS伪类

伪类（pseudo class）是CSS选择器的一种，其定义了元素的特殊状态，例如鼠标悬停、点击或焦点获得等。在自定义下拉框时，我们会用到以下主要CSS伪类：

:hover：鼠标悬停状态下的元素样式
:active：元素被点击时的样式
:focus：元素获得焦点的样式
:checked：被选中的元素的样式

步骤3: 定制下拉框样式

我们现在开始进行下拉框样式的个性化定制。首先，我们将去除下拉箭头。既然已经隐藏了下拉箭头，我们需要添加一个代替箭头的图标；这里我们使用Font Awesome为例，使用 fa-caret-down图标：

select {
  ...
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23a5a5a5' d='M59.5 19h-55a1.5 1.5 0 0 0-1.5 1.5v23a1.5 1.5 0 0 0 1.5 1.5h55a1.5 1.5 0 0 0 1.5-1.5v-23a1.5 1.5 0 0 0-1.5-1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 8px);
  background-position-y: center;
  padding-right: 22px;
}

select option:first-child {
  color: gray;
  display: none;
}

上面代码中，我们对下拉框设置了一个背景图像，通过 -webkit-appearance、-moz-appearance、appearance三个属性来去除了默认下拉箭头；还将其右侧留有一定空隙，使得代替箭头能够正常显示。此外，我们还使用了 :first-child伪类，将第一行灰化，并隐藏掉。

接下来，我们为悬停、焦点获得和选项被选中状态下的select元素设置样式：

select:hover, select:focus {
  border-bottom: 2px solid #4CAF50;
}

select option:checked {
  color: #4CAF50;
}

上述CSS代码是为鼠标悬停和获取焦点获得时添加下边框，在选中时改变字体颜色。

步骤4: 添加CSS边框属性

接下来，我们为整个下拉框添加边框和圆角，再微调下拉箭头位置：

select {
  ...
  border: 1px solid gray;
  border-radius: 4px;
  padding-right: 30px;
  background-position-x: calc(100% - 10px);
}

步骤5: 完成代码

最后，我们完成下拉框代码：

<label for="fruit">Choose your favorite fruit:</label>
<select id="fruit" name="fruit">
  <option value="" disabled selected hidden>Select an option</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
  <option value="mango">Mango</option>
</select>

<style>
select {
  padding: 8px;
  border: none;
  font-size: 16px;
  background-color: #f2f2f2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23a5a5a5' d='M59.5 19h-55a1.5 1.5 0 0 0-1.5 1.5v23a1.5 1.5 0 0 0 1.5 1.5h55a1.5 1.5 0 0 0 1.5-1.5v-23a1.5 1.5 0 0 0-1.5-1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: center;
  border-radius: 4px;
  border: 1px solid gray;
  padding-right: 30px;
}

select:hover, select:focus {
  border-bottom: 2px solid #4CAF50;
}

select option:checked {
  color: #4CAF50;
}

select option:first-child {
  color: gray;
  display: none;
}
</style>

附带完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS-only Custom Select Dropdown</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
select {
  padding: 8px;
  border: none;
  font-size: 16px;
  background-color: #f2f2f2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23a5a5a5' d='M59.5 19h-55a1.5 1.5 0 0 0-1.5 1.5v23a1.5 1.5 0 0 0 1.5 1.5h55a1.5 1.5 0 0 0 1.5-1.5v-23a1.5 1.5 0 0 0-1.5-1.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position-x: calc(100% - 10px);
  background-position-y: center;
  border-radius: 4px;
  border: 1px solid gray;
  padding-right: 30px;
}

select:hover, select:focus {
  border-bottom: 2px solid #4CAF50;
}

select option:checked {
  color: #4CAF50;
}

select option:first-child {
  color: gray;
  display: none;
}
</style>
</head>
<body>

<label for="fruit">Choose your favorite fruit:</label>
<select id="fruit" name="fruit">
  <option value="" disabled selected hidden>Select an option</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
  <option value="grape">Grape</option>
  <option value="mango">Mango</option>
</select>

</body>
</html>

以上，就是我们介绍如何在CodePen上使用“CSS only”方式来定制下拉框的样式，并最终实现下拉框自定义样式的效果。