I am currently utilizing vuejs along with tailwindcss and I am trying to figure out how to get rid of the default arrow from an HTML select element. Despite my attempts to remove it by using CSS properties like -moz-appearance, -webkit-appearance, -ms-appearance, -o-appearance, and appearance itself, as well as tailwind's appearance-none class, the arrow still persists.
select {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
I have also tried implementing tailwind's appearance-none
class on the select element:
<select :onchange="selectChanged()"
class="bg-transparent text-xl border-0 rounded-md hover:bg-slate-800 appearance-none" ref=" eventSelect">
Here is a snippet of my current template code:
<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>
Despite all my efforts, the default arrow remains visible, as shown in this image:
https://i.sstatic.net/tH7zk.png
I'm puzzled as to why it's not disappearing despite all of my attempts.