如何移除HTML select标签的默认箭头？（Vue+Tailwind场景）

你可以试试下面几个方法，大概率能解决问题：

1. 提升Tailwind样式优先级 #

有时候全局样式会覆盖appearance-none，用Tailwind的!变体强制提升优先级：

<select @change="selectChanged" 
        class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none!" 
        ref="eventSelect">
  <option class="bg-slate-800">50m </option>
  <option class="bg-slate-800"> 60m </option>
  <option class="bg-slate-800"> 100m </option>
  <option class="bg-slate-800"> 300m </option>
</select>

注意：把:onchange改成Vue标准的@change，原来的写法会直接执行函数而非绑定事件监听。

2. 自定义更具体的CSS规则 #

给select加专属类，写精准样式同时清除浏览器默认背景箭头：

/* 在你的样式文件中添加 */
.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important; /* 强制清除浏览器默认背景箭头 */
}

然后给select加上这个类：

<select @change="selectChanged" 
        class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none custom-select" 
        ref="eventSelect">
  <option class="bg-slate-800">50m </option>
  <option class="bg-slate-800"> 60m </option>
  <option class="bg-slate-800"> 100m </option>
  <option class="bg-slate-800"> 300m </option>
</select>

3. 用浏览器工具排查样式覆盖 #

按F12打开开发者工具，选中select元素，查看Computed面板里的appearance属性，确认是否被其他CSS规则覆盖。如果有，要么修改对应规则，要么用更具体的选择器覆盖它。

另外，你代码里ref=" eventSelect"的空格可以去掉，改成ref="eventSelect"更规范，避免潜在问题。

内容的提问来源于stack exchange，提问作者Ilan Yashuk