I'm developing a Vue.js application with Vuetify. But when I use a select tag, the drop-down-icon is disappeared.
<template>
<select class="select">
<option
v-for="item items"
:key="item">{{item}}</option>
</select>
</template>
<script>
export default {
data: () => ({
items:['apple', 'tomato']
}),
};
</script>
<style>
.select {
border-radius: '3px';
border: '1px solid #333333';
padding-left: '3px';
}
</style>
But when I test pure HTML code in a Chrome, I can see the drop-down icon.
<select>
<option> apple</option>
<option> tomato</option>
</select>
I guess that the Vuetify changed CSS style of my app. How can I make the icon appears?
I can't use . Because v-select is too big. I need a small height select box. That's why I use vanilla select tag.