css3 自定义 select 标签样式

时间：

分类：

css3

字数：

620 字

时长：

大约需要 2 分钟

次数：

0 人阅读

<select> 网页常见标签，也是设计师脑洞大开的地方，一百个设计师，可以有一千种设计效果。前端真是太难了…

常见方案

  • 使用 js 模拟 select 标签，大多数 UI 框架基本都会封装 select 标签，原因是每个浏览器渲染的 select 标签样式都不大一样，达不到统一的 UI 效果。

先看看默认的 select 样式，切换几个浏览器，会发现每个浏览器渲染的样式都不太一样：

重置样式

为达到统一的 UI 效果，需要先重置 select 标签样式，再写自定义的样式代码。

重置样式需要用到 css 的 appearance 属性，文档介绍： MDN，兼容性： can i use。从兼容性来看，IE浏览器基本不支持此属性，仅 edge 12+ ， Firefox 54+， chrome 4+ , safari 3.1+ 支持。

该属性可以用来重置任何元素样式，当然也包括 select 。

也可以用来设置元素为浏览器默认样式，比如把 div 设置为 button 效果，只需要 appearance: button;。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
.reset-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 0 none;
}
</style>

<select class="reset-select">
  <option>请选择一</option>
  <option>请选择二</option>
<select>

效果：

自定义样式

样式重置之后，就可以写自定义样式了。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  height: 2.2em;
  padding: 0 24px 0 8px;
  font-family: inherit;
  color: #666;
  cursor: pointer;
  position: relative;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAASFBMVEUAAAD////Nzc3Nzc3V1dXNzc3MzMzMzMzMzMzNzc3Ozs7j4+PMzMzMzMzMzMzPz8/MzMzNzc3Ozs7Ozs7MzMzNzc3Nzc3Nzc1mbvnCAAAAGHRSTlMAAymOBrtVs9RlPgnPltxPlWwvRJzBt+CSuXutAAAAM0lEQVR4nGMYBbgALycjiGIUZEaTEBLl4WJgEOZgZcLQwybOLsbHj800bhEBFqo7cfACACvdARau8cpxAAAAAElFTkSuQmCC') no-repeat right center;
}
</style>

<select class="select">
  <option>请选择一</option>
  <option>请选择二</option>
<select>

效果：

以上代码能满足基本的 select 样式，如果涉及到复杂的可搜索 select 输入框，那还是老老实实的用 js 模拟吧，没有捷径可走。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-10-27/css3-select/

如果您觉得文章不错，可以点击文章中的广告支持一下！