Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67497

When I use select tag in my Vue app, the drop-down-icon is disappeared. (Chrome)

$
0
0

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>

enter image description here

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>

enter image description here

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.


Viewing all articles
Browse latest Browse all 67497

Trending Articles