sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.65k stars 1.34k forks source link

I'm not able to change vs--disabled background styles #1831

Open FabianGML opened 7 months ago

FabianGML commented 7 months ago

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

Describe the bug When I add a disabled attribute to the v-select component, adds a new class named: 'vs--disabled'. I've been able to change the border and other styles, but i have a problem with the background, I saw in the docs that i can override the global variable --vs-state-disabled-bg, but this doesn't work as well

Steps To Reproduce Just add a disable attribute and try to change the background color

Expected behavior Handle the background color as my system needs

Screenshots

Captura de pantalla 2024-04-23 a la(s) 3 47 27 p m
hbiblia commented 5 months ago
.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected,
.vs--disabled .vs__open-indicator {
    background: red;
}
FabianGML commented 5 months ago

I've already tried that, i've tried to change --vs-state-disabled-bg and --vs-disabled-bg css var as well and I just not been able to change the color, somehow the default css vars overlaps my own css

FabianGML commented 5 months ago

the way that i manage to change the bg color, is to put !important to the end of the line --vs-state-disabled-bg: #2A323C !important; however, i don't think this is a good practice, but it was the only way i could change it