I have implemented a Vue Multiselect component, but I am struggling to fully customize it with CSS styles. I have applied some CSS styles, but I am unable to achieve all the customization I want. Specifically, I want to modify the option height, select box height, and the color of selected items/cross button. Can someone guide me on how to accomplish these customizations? What are the class names of those elements and how can I make the necessary modifications?
<multiselect
v-model="value"
:options="options"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:hide-selected="true"
:option-height="10"
class="min-w-200 w-full mb-2"
open-direction="bottom"
placeholder="--Select One or More--"
:show-labels="false"
label="name"
track-by="name"
:preselect-first="true"
>
<span
slot="selection"
slot-scope="{ values, search, isOpen }"
class="multiselect__single"
v-if="values.length && !isOpen"
>{{ values.length }} options selected</span
>
</multiselect>
Here is what I have created so far.
https://i.sstatic.net/Akzue.png
Below is the CSS code I am using:
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
color: rgb(48, 48, 48);
background-color: rgba(var(--vs-primary), 0.3);
font-size: 01rem;
}
.multiselect__tag:hover {
background-color: rgba(var(--vs-warning), 0.3);
}
.multiselect__option--disabled {
background: purple;
color: rgba(var(--vs-primary), 1);
font-style: italic;
}
.multiselect__option--highlight {
background-color: rgba(var(--vs-primary), 1);
color: rgb(255, 255, 255);
font-size: 0.9rem;
height: 1rem;
}
.multiselect__content {
background: rgb(255, 255, 255);
color: #444;
font-size: 0.9rem;
}
.multiselect__single {
height: 0.8rem;
font-size: 01rem;
color: #444;
}
.multiselect__tag {
position: relative;
display: inline-block;
padding: 0.25rem 1.625rem 0.25rem 0.625rem;
margin-right: 0.625rem;
line-height: 1;
margin-bottom: 0.5rem;
}
</style>