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

Question

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

Does this answer your question? [How to remove the default arrow icon from a dropdown list (select element)?](https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element) — Stu, May 13 '23 at 08:38

score 2 · Accepted Answer · answered Jun 05 '23 at 18:30

2

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>

answered Jun 05 '23 at 18:30

Ilan Yashuk

145
1
9

I tried changing the background color and saw it changing, without the arrow being removed so I thought the arrow and background don't have connection. But apparently changing background color does not affect background image. Removing only `background-image` will also work. – Ilan Yashuk Jun 05 '23 at 18:32

score 0 · Answer 2 · answered May 13 '23 at 09:01

0

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

as you can see the following line of code works as expected, I guess you need to make sure that your CSS is working properly and your styles are applied to your HTML

answered May 13 '23 at 09:01

Zav Khachatryan

31
1

I did the same thing and added `background-color:red;` just to check that it applies. It does. Just for some reason the arrow does not remove. That's why I asked the question because I don't know if It's a css problem but maybe more of a vuejs problem... – Ilan Yashuk May 13 '23 at 09:22
if you can share more details maybe I can help you with this issue – Zav Khachatryan May 13 '23 at 15:48

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

2 Answers2