CSS自定义select下拉选择框的样式(不用其他标签模拟)

下面是关于“CSS自定义select下拉选择框的样式”的攻略：

1. 原生select样式覆盖

使用原生的select标签进行下拉菜单功能开发时，为了美观和更好的用户体验，我们通常会对其样式进行美化。但是，由于原生的select样式是很难被覆盖的，所以我们需要使用一些特殊技巧和CSS技巧进行样式覆盖。

1.1 隐藏原生select的样式

首先，我们需要将原生下拉菜单的样式进行隐藏，因为如果不隐藏，即使使用了我们自定义的样式，原生的样式还是会影响整个页面。

select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

上述CSS代码可以将原生的下拉菜单样式进行隐藏，并将边框样式去掉。出现了一些新属性appearance和-webkit-appearance，它们是CSS3新增的用于表单元素样式的属性，可以控制表单元素的默认样式。使用appearance: none;和-webkit-appearance: none;可以将原生的样式彻底去除。

1.2 自定义下拉菜单样式

接下来就可以通过一些CSS的样式规则对下拉菜单进行自定义样式，例如将其背景颜色改为白色，字体颜色修改为黑色等等。

select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #000000;
  width: 150px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: sans-serif;
}

1.3 使用伪元素和伪类实现下拉箭头

我们知道，原生的select下拉菜单中是有一个箭头的，而我们自定义的样式中，箭头并没有出现。那么，我们可以使用CSS中的伪元素和伪类来实现箭头的显示。

select::-ms-expand,
 select::-webkit-scrollbar,
 select::-webkit-scrollbar-button {
  display: none;
}

select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #000000;
  width: 150px;
  padding: 8px 20px 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  font-family: sans-serif;
  position: relative;
}

select::after {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 6px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  top: 50%;
  right: 10px;
  margin-top: -3px;
  pointer-events: none;
}

上述代码中，我们使用伪元素::after来创建一个三角形的箭头，样式中display: none;将原生箭头（仅适用于Edge浏览器）隐藏掉，top: 50%; right: 10px;将箭头的位置调整到select右侧，pointer-events: none;用于防止箭头被鼠标点击。

2. select2样式覆盖

另外一种可以实现下拉选择框自定义样式的方法是使用第三方插件select2。它提供了非常强大的自定义样式功能，让我们可以完全改变下拉列表的布局和样式。

以下是基于select2框架实现自定义下拉选择框的样式：

2.1 引入CSS和JavaScript文件

在使用select2之前，我们需要先在网页中引入相应的CSS和JavaScript文件。这里我们使用CDN来引入官方提供的文件，你也可以下载到本地进行引用。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>

2.2 初始化select2插件

通过引入的select2文件，我们可以使用其提供的自定义函数来初始化下拉菜单的样式。

$('select').select2();

在HTML中，我们需要添加<select>标签，并设置id、name、options等属性。

<select id="mySelect" name="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

2.3 自定义样式

在初始化完成后，我们就可以通过CSS对下拉菜单进行自定义样式的修改。例如，修改select2的宽度、高度、背景色、字体颜色等等。

.select2-container--default .select2-selection--single {
  background-color: white;
  border: 1px solid #cccccc;
  height: 40px;
  line-height: 38px;
  font-size: 16px;
  color: #999;
  border-radius: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 40px;
  line-height: 38px;
  text-align: center;
  background: #f0f0f0;
  border: 1px solid #cccccc;
  border-radius: 0 4px 4px 0;
  color: #999;
  cursor: pointer;
}

.select2-container--open .select2-selection--single .select2-selection__arrow {
  border-radius: 4px 0px 0px 4px;
}

如上代码所示，我们可以对select2-container、select2-selection、select2-selection__arrow等类别的样式进行设置。

OK，以上是CSS自定义select下拉选择框的样式攻略，希望你能学到些东西。