How to remove the HTML select tag's default arrow?

I am using vuejs and tailwindcss. How do I remove the default arrow from HTML select's element? I've already tried removing appearance with css:

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

as well as with tailwind's appearance-none

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

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>

It looks like this:

I just can't seem to get it removed for some reason :(

After couple of weeks I found something that have worked for me... For some reason (probably vuejs default settings) the <select> element is styled with background image that contains an arrow. If you remove it, you are still left with default padding, so to reset those two values, I added this:

<style>

select {
background: none;
padding: 0;
}

</style>