Vue-select: How to customize the css for v-select

[niti11]

Hi All
How can we add the css to this select box.
I want to remove the border for select box & also want to set postion as top for the option box.

I tried this way.
.v-select .dropdown-toggle
{
border: none !important;
}

But It doesn't work for me. Can you help me on this?

[TongDaDa]

me too

[niti11]

Hi all.

Can anyone have the solution for this issue?

[Gil-1]

Did anyone got the chance to try this https://adamwathan.me/renderless-components-in-vuejs/?

[sagalbot]

@niti11 you just need to increase specificity. I've tried to make the rules the least specific as possible so they can be overridden. Try adding an id or extra class to your select:

<v-select id="mySelect" />

#mySelect .v-select .dropdown-toggle {
   border: none;
}

@Gil-1 the plan for 3.0 is to take that approach.

[evtnlife]

go to your node_modules/vue-select/dist/vue-select.js and change the dropdown-toggle class!

[asyzdykov]

should be reopened...no solution
it works when selected...but css changes in dropdown state (while selection)

[YuryKorovko]

@sagalbot Hi, probably do you have any ideas how to customise styling for placeholder ?
It would be very cool.
Thanks in advance.

[YuryKorovko]

go to your node_modules/vue-select/dist/vue-select.js and change the dropdown-toggle class!

What would you do if your app is dockerized ?

[Fusseldieb]

@niti11 you just need to increase specificity. I've tried to make the rules the least specific as possible so they can be overridden. Try adding an id or extra class to your select:

<v-select id="mySelect" />

#mySelect .v-select .dropdown-toggle {
   border: none;
}

This works, as long as your CSS isn't scoped. Learned it the tedious way. Works now.

<style> = Works

<style scoped> = Doesn't work

[kules]

Use deep selector to make it work with scoped css.

[MatheusR42]

There is some way to import with webpack just the js without css?

[sagalbot]

@MatheusR42 not in v2.x – CSS and JS are separated in upcoming 3.0 release.

[agm1984]

Using id for specificity is perhaps not the best idea because you are not supposed to have multiple elements with the same ID. Here is a solution that avoids that problem:

<template>
    <v-select :id="elementId" :name="name"></v-select>
</template>

...

computed: {
    elementId() { return `YourSelect-${this.name ? this.name : this.getUniqueId()}`; },
},

methods: {
    // generates 16char base64 string in case `name` prop is omitted
    // ex: YourSelect-MC4yMzI0ODM1MDcx
    getUniqueId() { return btoa(Math.random()).substring(0, 16); },
},

In your stylesheet (shown with Tailwind CSS):

/* div[id^='YourSelect-'] is wildcard matcher for IDs with `YourSelect-*` */
div[id^='YourSelect-'] .dropdown-toggle { @apply .w-full .flex .flex-row .items-center .bg-white .text-grey-700 .truncate .border .border-grey-300 .rounded-none .p-16; }
div[id^='WsSelect-'] .dropdown-toggle .form-control { @apply .p-0 .m-0; }
div[id^='WsSelect-'] .dropdown-toggle .vs__actions { @apply .p-0 .m-0; }

It does work to just give it id="YourSelect" and use CSS #YourSelect .dropdown-toggle, but I do not consider this a good solution as some dev tooling will probably throw errors when multiple elements have the same ID.

Without unique ID attributes, document.getElementById() will return the first dropdown that appears on the page, thus making your dropdown component not as reuseable or composable--at least not properly.

[agm1984]

Over the past while, I find the best way to reliably edit the styles is to do the following series of steps:

1. navigate to the folder in node_modules: node_modules/vue-select/src/components/
2. open the file: Select.vue
3. copy the entire contents of the block to your clipboard
4. paste them into your project's CSS file
5. run a find&replace in that copied CSS: find .v-select and replace it with div[id^='YourSelect'] (read my previous comment above this one to understand YourSelect)
6. now you have full control over the styles

It looks like doing what I just described added 6kb to my CSS (prior to overwriting all the styles with Tailwind utility classes), which isn't too horrific, but an astute observer will notice that we are wasting 6kb by double-loading these styles.

If this isn't clean enough for you, then you should probably just copy/paste the library into your Vue components folder and not even use the library, because it's overall not that complex. The library consists of one Vue component and 3 mixins. Take a look in the node_modules folder and play around a bit.

[sagalbot]

@agm1984 thanks for the suggestions. I have one final breaking change to wrap up and v3 is ready to ship. Here's what's been done so far on this topic:

• all CSS has been yanked out of the component file
• all class names have been refactored to use a vs__ prefix to avoid class collisions
• CSS has been converted to SCSS
  
  
  
  • variables for almost anything you'll want to customize
  
  
  • 3.1 will ship with CSS variables in addition to SCSS
  
  
• all selectors are written with the lowest possible specificity, generally single class name selectors

[agm1984]

It sounds beautiful, can't wait.

[abhishekkumar981]

class="style-chooser">