Change styles of multi select

[shyamchandranmec]

Hi I need to change the border-radius of .multiselect__tags class. I think the whole styles are scoped so my styles are not getting added. Is there any way to achieve this?

[shentao]

Styles are not scoped. Please look into https://github.com/monterail/vue-multiselect/blob/2.0/src/Multiselect.vue Some styles might be nested tho, thus you have to increase the specificity of your own styles.

[shyamchandranmec]

@shentao So here is the issue. The component in which I am using vue-multiselect has styles which are scoped. so when I give custom styles to multiselect__tags it is generating a css which looks like this

.multiselect__tags [data-v-0e00f27e] {
 //my custom styles goes here
}

In the generated HTML only the outer div of vue-multiselect has this data attribute attached. The child divs doesn't have these classes attached. So my styles are not getting attached to the div with class multiselect__tags

[shyamchandranmec]

@shentao Looks like it is same as this issue: deep selector

[shentao]

My suggestion would be to use another style tag, as a Vue component can have multiple style blocks.

<style scoped>
// your component styles
</style>

<style>
.your_custom_class .multiselect__tags
  // stuff
</style>

[trutherford2388]

This is not a good solution. There are situations at which a user would want to change the styles for only one multiselect and leave all the others with their default styles. If you add in a style that is not scoped to that component, then it will affect all multiselect styles that are in the same parent/structural component and not in the individual components.

For instance, I have ParentComponent.vue with two different components that I created myself. ComponentA.vue and ComponentB.vue. If both have a vue-multiselect in it and I only want to change the styles for ComponentA.vue's multiselect and NOT change ComponentB.vue's multiselect styles, then this is not possible. The only option I would have is to fork off of this node-module, modify and release, and then use the modified version for the one component that I want the styles to change and then keep the original node-module the same.

The issue with this is that ComponentA.vue would no longer get updates from any new releases with the vue-multiselect node module. I would much rather prefer to see a property that would allow us to change styles within this component rather than forcing us to default all multiselect styles to our custom style if we only want one instance of the vue-multiselect styles to be changed.

@shentao Please would you be able to create a feature request card to have this functionality added in.

V/R Travis L. Rutherford

[dhritzkiv]

If anyone is looking for a solution that uses scoped styles, but targets multiselect elements (or other elements out of scope), check out the Deep Selectors functionality built into vue-loader's scoped css feature:

<style lang="css" scoped>
.your_custom_class >>> .multiselect__tags {
    // stuff
}
</style>

Or in SCSS:

<style lang="scss" scoped>
.your_custom_class::v-deep .multiselect {
    .multiselect__tags {
     // stuff
     }
}
</style>

[YarinceP]

Any updates about this? Currently I need to change multiselect styles.

[EvgenyGulyaev]

Hm I tried to use this syntax But doesn't works

[EvgenyGulyaev]

Sorry my trouble I changed styles thanks

[Elzakzouk]

you can edit the main style file in the node modules node_modules\vue-multiselect\dist\vue-multiselect.min.css

[trutherford2388]

you can edit the main style file in the node modules node_modules\vue-multiselect\dist\vue-multiselect.min.css

This suggestion would not work because as soon as you perform another npm install, your changes would then be over written by the original values. You should never be altering anything within the node modules folder because of this.

Although, it is possible to extend the component and make your own alterations, but then that comes with it's own set of potential issues.

[bagaskarala]

i custom my multiselect to follow bootstrap 4 default style

// fix multiselect weird height when using a placeholder
.multiselect__placeholder {
  display: inline-block !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
}

// error class on multiselect
.multiselect.invalid .multiselect__tags {
  border: 1px solid #f86c6b !important;
}

// override default multiselect styles
.multiselect__option--highlight {
  background: #428bca !important;
}

.multiselect__option--highlight:after {
  background: #428bca !important;
}

.multiselect__tags {
  padding: 5px !important;
  min-height: 10px;
}

.multiselect__placeholder{
  margin-left: 10px;
  margin-top: 2px;
}

.multiselect__tag {
  background: #f0f0f0 !important;
  border: 1px solid rgba(60, 60, 60, 0.26) !important;
  color: black !important;
  margin-bottom: 0px !important;
  margin-right: 5px !important;
}

.multiselect__tag-icon:after {
  color: rgba(60, 60, 60, 0.5) !important;
}

.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
  background: #f0f0f0 !important;
}

.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
  color: red !important;
}

preview

[magistr4815]

Hey. I use modular styles and the exact naming of the class that needs to be modernized (why so? - because the internal naming of the class in my project is hashed and css options will not be added).

<style lang="stylus" module="$s">
.multiselect
  // IT WORK
  // hide List is empty when use tagging and search
  [class="multiselect__content-wrapper"]
    display: none
  
  // not working
  .multiselect__content-wrapper
    display: none
</style>

[OriginalMeet]

i custom my multiselect to follow bootstrap 4 default style

// fix multiselect weird height when using a placeholder
.multiselect__placeholder {
  display: inline-block !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
}

// error class on multiselect
.multiselect.invalid .multiselect__tags {
  border: 1px solid #f86c6b !important;
}

// override default multiselect styles
.multiselect__option--highlight {
  background: #428bca !important;
}

.multiselect__option--highlight:after {
  background: #428bca !important;
}

.multiselect__tags {
  padding: 5px !important;
  min-height: 10px;
}

.multiselect__placeholder{
  margin-left: 10px;
  margin-top: 2px;
}

.multiselect__tag {
  background: #f0f0f0 !important;
  border: 1px solid rgba(60, 60, 60, 0.26) !important;
  color: black !important;
  margin-bottom: 0px !important;
  margin-right: 5px !important;
}

.multiselect__tag-icon:after {
  color: rgba(60, 60, 60, 0.5) !important;
}

.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
  background: #f0f0f0 !important;
}

.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
  color: red !important;
}

preview

This works amazingly just make sure not to have scoped in your style tag :)

[Klodovsky]

Here's the solution ( copy this just after your , this way you get access to the css classess :

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
.multiselect__tags {
    border: none !important;
    background: transparent;
    font-family: WorkSans-light !important;
    font-size: 14px !important;
    padding: 5px !important;
}

.multiselect__tag {
    border: 1px solid rgba(60, 60, 60, 0.26) !important;
    margin-bottom: 0px !important;
    margin-right: 5px !important;
    /* min-height: 20px !important;
    min-width: 25px !important; */
}
.multiselect__placeholder {
    display: inline-block !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
}
</style>

[7oo1er]

Hello!

I did this to match style of the bootstrap 5 input field.

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style>
.multiselect__tags {
  border: 1px solid #ced4da;
  background: #fff;
}

.multiselect__tags:focus-within {
  animation-duration: 0.15s;
  animation-name: ease-in-out;
  outline: #bdd7fa solid 4px;
  border: 1px solid #86b7fe;
}

.multiselect__content-wrapper {
  animation-duration: 0.15s;
  animation-name: ease-in-out;
  border-color: #86b7fe;
  outline: #bdd7fa solid 4px;
}

@keyframes ease-in-out {
  from {
    outline: #bdd7fa solid 0px;
  }

  to {
    outline: #bdd7fa solid 4px;
  }
}
</style>

[MATTOFIRE]

hi, has anyone ever integrated Multiselect with Tailwind css. I ask because if so it would be easier to integrate the "dark" mode. The management of custom css in v3 is clear but it is not easy to integrate the rest. If anyone has already faced the problem or found a solution, please share here. Thank you

[shentao]

@MATTOFIRE I would say you would need to put in some upfront work of translating the existing CSS into compatible Tailwind using the @apply function to mimic the existing styles. Then it should inherit things from Tailwind config automatically.

.multiselect__select {
  @apply <tailwind-classes-here>
}

[alivadjid]

Hello and thank you for the useful library 😊

In my Vue SPA, I'm using PostCSS to manage styles. Each of my components can have its own separate styles. The styles from one component do not override the styles of another.

I'm figuring out how this solution influences the build process because some developers don't support using :global. However, I can't find proof of this.

What do you think?

<template>
  <VueMultiselect class="multiselect" />
</template>

<script setup lang="ts" ns>
  import VueMultiselect from 'vue-multiselect';
</script>

<style lang="postcss" module>
.multiselect {
  :global(.multiselect__tags) {
    padding: 0.275rem;
    background-color: var(--color-gray-soft);
  }
  :global(.multiselect__tag) {
    background-color: var(--color-white);
    color: var(--color-gray-dark);
  }
}
</style>