如何删除 HTML select 标签的默认箭头？

Question

我正在使用 vuejs 和 tailwindcss。如何从 HTML select 元素中删除默认箭头？我已经尝试过用 css 删除外观：

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

以及顺风的appearance-none

<select :onchange="selectChanged()"
            class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">

我当前的模板代码：

<template>
    <div>
        <select :onchange="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>
    </div>
</template>

它看起来像这样：

由于某种原因我似乎无法将其删除:(

Answer 1

几周后，我发现了一些对我有用的东西......出于某种原因（可能是 vuejs 默认设置），该<select>元素的样式使用包含箭头的背景图像。如果删除它，您仍然保留默认填充，因此为了重置这两个值，我添加了以下内容：

<style>

select {
background: none;
padding: 0;
}

</style>