css3 自定义 select 标签样式

<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/

如果您觉得文章不错,可以请我喝一杯咖啡!