Change styles of multi select #287

shyamchandranmec · 2017-02-27T12:52:36Z

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 · 2017-02-27T12:54:07Z

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 · 2017-02-27T13:18:31Z

@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 · 2017-02-27T13:33:38Z

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

shentao · 2017-02-27T15:40:43Z

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 · 2019-01-15T16:32:02Z

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 · 2019-04-10T14:21:20Z

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 · 2020-02-25T20:02:20Z

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

EvgenyGulyaev · 2020-04-22T08:10:21Z

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

EvgenyGulyaev · 2020-04-22T08:20:53Z

Sorry my trouble
I changed styles
thanks

Elzakzouk · 2020-06-18T02:14:15Z

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

trutherford2388 · 2020-06-18T03:33:37Z

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 · 2020-06-24T06:11:32Z

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 · 2020-09-28T12:38:03Z

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 · 2021-01-19T19:57:47Z

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 · 2021-05-22T12:12:41Z

Here's the solution ( copy this just after your </script> , 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 · 2023-02-24T12:48:47Z

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 · 2023-06-01T15:24:00Z

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 · 2023-06-01T15:29:58Z

@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 · 2024-07-23T17:38:38Z

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>

CristhianDuardo · 2024-09-04T23:48:04Z

any simple soluciont to the problem

shentao closed this as completed Feb 27, 2017

shentao added the question label Feb 27, 2017

shentao reopened this Feb 10, 2019

shentao added the enhancement label Feb 10, 2019

mattelen mentioned this issue Sep 16, 2022

Style using CSS variable #1493

Closed

Uh oh!

Change styles of multi select #287

Change styles of multi select #287

Comments

shyamchandranmec commented Feb 27, 2017

shentao commented Feb 27, 2017

Uh oh!

shyamchandranmec commented Feb 27, 2017

Uh oh!

shyamchandranmec commented Feb 27, 2017

Uh oh!

shentao commented Feb 27, 2017

Uh oh!

trutherford2388 commented Jan 15, 2019

Uh oh!

dhritzkiv commented Apr 10, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

YarinceP commented Feb 25, 2020

Uh oh!

EvgenyGulyaev commented Apr 22, 2020

Uh oh!

EvgenyGulyaev commented Apr 22, 2020

Uh oh!

Elzakzouk commented Jun 18, 2020

Uh oh!

trutherford2388 commented Jun 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bagaskarala commented Jun 24, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

magistr4815 commented Sep 28, 2020

Uh oh!

OriginalMeet commented Jan 19, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Klodovsky commented May 22, 2021

Uh oh!

7oo1er commented Feb 24, 2023

Uh oh!

MATTOFIRE commented Jun 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shentao commented Jun 1, 2023

Uh oh!

alivadjid commented Jul 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CristhianDuardo commented Sep 4, 2024

Uh oh!

dhritzkiv commented Apr 10, 2019 •

edited

Loading

trutherford2388 commented Jun 18, 2020 •

edited

Loading

bagaskarala commented Jun 24, 2020 •

edited

Loading

OriginalMeet commented Jan 19, 2021 •

edited

Loading

MATTOFIRE commented Jun 1, 2023 •

edited

Loading

alivadjid commented Jul 23, 2024 •

edited

Loading