How to change vue-multiselect component box with ccs?

[petrogromovo]

In vuejs(2.6.14) I use vue-multiselect component

<multiselect
    v-model="selected_city_id"
    :options="citiesSelectionArray"
    label="label"
    track-by="code"
    class="form-control"
    placeholder="Выберите город"
    selectLabel	=""
    selectedLabel=""
    deselectLabel=""
    :multiple="false"
>
</multiselect>

and I need to show selection items area bordered from 4 sides, like : https://prnt.sc/26b3g8p
Modifying styles of vue-multiselect component in my scss file with code

.multiselect__content-wrapper {
    margin: 0 !important;
    padding: 0 !important;


    -webkit-box-shadow:  7px 7px 7px 7px #c5c5c5;
    -moz-box-shadow: 7px 7px 7px 7px #c5c5c5;
    box-shadow: 7px 7px 7px 7px #c5c5c5;
    display: inline-block;
}

I managed I look it like : https://prnt.sc/26b3h3d

Can I alter boxes I need with css styling?

Thanks in advance!

[cssissimple]

You should target the multi select box by adding the box shadow.

Then target the results message to have a white background and remove the box shadow for this element.

It is difficult to provide CSS without seeing the actual element on a webpage.

[PaulOB]

@petrogromovo

Can I alter boxes I need with css styling?

Do you have a working demo so that we can see what css you need to change as I know nothing about the vue-multiselect component (or vue.js)?

If you have the final rendered html then it should be possible to style it close to what you want assuming that the html allows.

I just looked at someone else’s Vue multiselect in a code sandox and I managed to change it as below with a few css rules.

Default:

Open:

[adhipics]

Multiselect is a difficult change in Vue.js components. It’s not that hard to make the changes but you need to know what you are doing to make the change work for your project.

The most common reason why people look up how to change pre-existing multiselect boxes is because they are looking for a way to enable/disable a particular item from the list.

The best and most reliable way to do this is with ccs() or v-for=“row in items” :

< div class = “multipage-section” > < div class = “multiselect” > < select v - on:change=" onChange(row) " v - options=" { selected } "> { selected * 10 }

Vue-multiselect component used to display data in a list with multiple options

When you want to change the vue-multiselect component box with ccs, it is easy to do so. There are some steps you should follow and they are as follows:

1. Install ccs library

2. Create a css file for your desired theme

3. Create a new multiselect component that has the ccs option set to true (this will override default template from vue-multiselect)

4. Replace the default template of vue-multiselect with your new one.

5. Bind to your new multiselect instead of the old one.