Vue-multiselect: 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>