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