html 中 select 选择器通过 CSS 去除(隐藏)默认的下拉箭头(三角)
有在移动端使用 select 选择器并去除边框和默认的下拉箭头的需求,边框直接 border:0
就好,下拉箭头的隐藏没用过,找了一下相关 CSS,直接上代码:
/* 去掉 select 箭头*/
.not-arrow{
appearance:none;
-moz-appearance:none; /*火狐*/
-webkit-appearance:none; /*苹果和谷歌*/
background: initial;
}
.not-arrow::-ms-expand { display: none; }
上面一个是适配了大部分浏览器的 CSS 样式,下面一段是针对 IE 浏览器的,主要通过设置 appearance
样式实现,直接应用到 select 上。
我在隐藏 select 箭头的基础上另加了一句:background: initial;
,这是因为有的前端框架会改写原生的 html 控件,从而统一展现样式。
我碰到的情况就是被改写过的,在加上 appearance
后,箭头并未隐藏,这让我都开始怀疑 CSS 样式是否正确了。回过头仔细检查了一下 select 具体样式,发现被改写。原生的箭头是个实心的倒三小角,而通过 background
改写后的是类似向下的中括号的符号。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。