海滨擎蟹

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 改写后的是类似向下的中括号的符号。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »