Vue-select: How can I hide the x (for Clear selection) when using v-model?

[halloleo]

Vue-selct is great, but I cannot figure out how to disable the x on the right side of the control when using v-model.

My callling tag looks like this

                    <v-select
                        class="chart-selector"
                        v-model="periodSelected"
                        @input="setPeriod"
                        :options="['Yearly', 'Quarterly']"
                    ></v-select>

Yearlyand Quarterlyare the only options possible heer and a empty selection doesn't make sense either, so I don't need the x.

[iPopstop]

Maybe <v-select :clearable="false" />?

[halloleo]

Thanks! Works! :-)

I'm not a Vue expert, is it possible to put this in the CSS for the class I attach to my vue-select controls?

[sagalbot]

Yep, the clearable prop will work

<v-select :clearable="false" />

And so would this CSS:

.v-select .dropdown-toggle .clear {
   display: none;
}

[halloleo]

Thanks for this. However the CSS code doesn't work for me.

My component looks like this:

<template>
    <div>
        <v-select
            class="chart-selector"
            v-model="selected"
            :options="['Bread', 'Butter']"
        ></v-select>
    </div>
</template>

<script>
export default {
    props: { value: String },
    data() {
        return { selected: this.value }
    },
}
</script>

<style scoped>
.v-select .dropdown-toggle .clear {
    display: none;
}
</style>

Something is going wrong in the _scoped_ style. How can I set the CSS correctly in the scoped style tag?

[noureddinenoureddine]

@halloleo . for scoped css you should use >>> to reach element in child components

<style scoped>
>>> .v-select .dropdown-toggle .clear {
    display: none;
}
</style>

[hiberna]

Interestingly, none of the solutions posted in various places are working or me and I'm not sure why that might be. Here's my code:

<v-select v-model="selections.item" :clearable=false :options="options.items" label="text" placeholder="Select an item" autocomplete="off" :filterable="false" @search="fetchItems">
    <template slot="no-options">Type to search items</template>
</v-select>

And I've tried various variations of css and am currently using:

.vs__clear {
    display: none !important;
    visibility: hidden !important;
}
.v-select .vs__dropdown-toggle .vs__clear
, .v-select .dropdown-toggle .clear {
    display: none !important;
    visibility: hidden !important;
}

Obviously going buck wild to try to get this thing gone. For clarity, the "x" I'm trying to get rid of is the one that shows up while I'm typing.

I can't for the life of me figure out what's wrong. I'd appreciate any ideas if someone spots something!

[peachykeeen]

@hiberna

Have the same problem, looks like some chrome issue. this helped

.vs__search::-webkit-search-cancel-button {
  display: none !important;
}