search

shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.66k stars 989 forks source link

Color options #1628

Open willtholke opened 1 year ago

willtholke commented 1 year ago

This library doesn't have any parameters for customizing the current CSS scheme. It'd be nice to customize the interface colors without manually changing the source code.

In order to customize the color scheme of the Multiselect widget, I had to override 8 css classes manually (see below).

<style>
    .multiselect__tag {
        background: #74a93c;
    }

    .multiselect__option--highlight {
        background: #74a93c;
    }

    .multiselect__option--highlight:after {
        background: #74a93c;
    }

    .multiselect__option--selected.multiselect__option--highlight {
        background: #798b91;
    }

    .multiselect__option--selected.multiselect__option--highlight:after {
        background: #798b91;
    }

    .multiselect__tag-icon:hover {
        background: #74a93c;
    }

    .multiselect__input, .multiselect__single {
        padding: 0 0 0 0;
    }

    .multiselect__placeholder {
        margin-left:4px;
        color: #999999;
    }
</style>
lorenzoalulithos commented 1 month ago

@willtholke you are the best