I have implemented a vue-select library and the CSS file needs to be imported into App.vue for global use.
Afterwards, I customized it using scoped SCSS. Here is the resulting HTML and CSS:
<v-select :options="array" v-model="selectedItem" class="mx-5"></v-select>
// Generated HTML markup
<div data-v-2059d297="" dir="auto" class="v-select mx-5 vs--single vs--searchable">
<div id="vs1__combobox" role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option" class="vs__dropdown-toggle">
<div class="vs__selected-options">
<input aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off" class="vs__search">
</div>
</div>
</div>
Note that the data-v-2059d297 attribute only affects the outer v-select div, not its inner elements.
.v-select {
margin-top: 30px;
.vs__dropdown-toggle {
border: none;
border-bottom: 2px solid #707070;
border-radius: 0;
}
.vs__dropdown-menu {
max-height: 200px;
}
}
The generated CSS can be viewed in this image: https://i.sstatic.net/CiAAy.png
The data-v-2059d297 mistakenly appeared next to vs__dropdown-menu, although it is not supposed to be there.
I am now looking for solutions on how to apply different CSS styles to the same v-select element. Any suggestions?