我正在使用vuejs和tailwindcss。 如何從HTML select的元素中移除默認(rèn)箭頭？ 我已經(jīng)試過用css移除外觀:

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

以及順風(fēng)的外觀-沒有

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

我當(dāng)前的模板代碼:

<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>

看起來是這樣的:

不知什么原因，我好像就是弄不掉它

幾周后，我發(fā)現(xiàn)了一些對我有用的東西... 由于某種原因(可能是vuejs的默認(rèn)設(shè)置),該& lt選擇& gt元素使用包含箭頭的背景圖像進(jìn)行樣式化。如果您刪除它，您仍然會保留默認(rèn)填充，因此為了重置這兩個值，我添加了以下內(nèi)容:

<style>

select {
background: none;
padding: 0;
}

</style>

.custom-select {
  /* Hide the default arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<select class="custom-select">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>