Unique style for custom vue multiselect component

I have implemented a Vue Multiselect component, but I am struggling to fully customize it with CSS styles. I have applied some CSS styles, but I am unable to achieve all the customization I want. Specifically, I want to modify the option height, select box height, and the color of selected items/cross button. Can someone guide me on how to accomplish these customizations? What are the class names of those elements and how can I make the necessary modifications?

<multiselect
                    v-model="value"
                    :options="options"
                    :multiple="true"
                    :close-on-select="false"
                    :clear-on-select="false"
                    :preserve-search="true"
                    :hide-selected="true"
                    :option-height="10"
                    class="min-w-200 w-full mb-2"
                    open-direction="bottom"
                    placeholder="--Select One or More--"
                    :show-labels="false"
                    label="name"
                    track-by="name"
                    :preselect-first="true"
                  >
                    <span
                      slot="selection"
                      slot-scope="{ values, search, isOpen }"
                      class="multiselect__single"
                      v-if="values.length &amp;&amp; !isOpen"
                      >{{ values.length }} options selected</span
                    >
                  </multiselect>

Here is what I have created so far.

https://i.sstatic.net/Akzue.png

Below is the CSS code I am using:

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
  color: rgb(48, 48, 48);
  background-color: rgba(var(--vs-primary), 0.3);
  font-size: 01rem;
}
.multiselect__tag:hover {
  background-color: rgba(var(--vs-warning), 0.3);
}

.multiselect__option--disabled {
  background: purple;
  color: rgba(var(--vs-primary), 1);
  font-style: italic;
}

.multiselect__option--highlight {
  background-color: rgba(var(--vs-primary), 1);
  color: rgb(255, 255, 255);
  font-size: 0.9rem;
  height: 1rem;
}

.multiselect__content {
  background: rgb(255, 255, 255);
  color: #444;
  font-size: 0.9rem;
}
.multiselect__single {
  height: 0.8rem;
  font-size: 01rem;
  color: #444;
}
.multiselect__tag {
  position: relative;
  display: inline-block;
  padding: 0.25rem 1.625rem 0.25rem 0.625rem;

  margin-right: 0.625rem;

  line-height: 1;

  margin-bottom: 0.5rem;
}
</style>

Answer №1

If you want to personalize it, you have the option to use a SASS file. I often look at a specific issue on the repository on github to ensure that the multiselect fits in with the design of Bootstrap.

For more information, you can visit the following link: https://github.com/shentao/vue-multiselect/issues/718

You will discover a wealth of resources to help you customize it to your preferences, including a variety of variables to play around with.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing data in localStorage with the use of java, json, ajax, and html

I have been exploring the use of localStorage to transfer variables between pages. In my JavaScript, I am populating a List: output.add(0, accountGroup.getAccountId()); output.add(1, accountGroup.getLevel()); output.add(2, accountGroup.getGroupName()); ou ...

Optimizing the selection and deselection of checkboxes using JQuery with X checkboxes in mind

If I have a set of 'X' checkboxes (any input elements) in a form and "M" option selection indexes ("M" less than or equal to "X"), how can I efficiently select the "M" option indexes/values and deselect the remaining checkboxes? For example, if ...

What is the best way to incorporate Vuetify into a new application?

Recently, I developed a new app using Vue and I decided to integrate Vuetify as the framework. After executing the npm install vuetify --save command, Vuetify was added to the app successfully. However, when I tried to use it, the CSS button colors were no ...

CSS Styling for Adjusting Table Cell Widths

In my HTML table, I am trying to set the overall width while ensuring that the label column does not become too wide. Although it functions correctly in Firefox 4, IE 9 seems to be completely ignoring the width property. <html> <head> <sty ...

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

Conceal a section of a container with the click of a button within a WordPress Plugin

I am currently utilizing a Wordpress plugin known as contact form 7 to construct an email list for an upcoming website project. The client has specifically requested that we avoid using services like mailchimp due to their preference of not sending ANY ema ...

How do I create a left-to-right navigation bar for my web form?

Just starting out with Asp.net and now trying to create a right-to-left navbar. I've tried some code but everything ends up being left to right. ...

"Using VueJS to allow for easy data editing directly from a table and redirect

I currently have 3 pages set up for my project: 1- The first page is a list displaying all the data in a table format. 2- The second page allows me to add new data (currently using dummy data in the code). 3- The third page is supposed to be an edit page, ...

Fixing the issue with CSS scrollbar swapping

I'm currently working on a template and facing a challenge that I can't quite comprehend. More specifically, I understand why it's happening, but I'm struggling to implement a cross-browser solution. The issue revolves around a fixed b ...

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

Enhancing jQuery functionality: Ensuring newly added elements are aware of existing functions

I need assistance with my HTML table. Each row (tr) contains a value, for example 200$, and a delete button. How can I ensure that each new row added automatically knows the recent functions without having to call them every time? $(function () { $(&ap ...

Utilize the conditional GET method when including scripts through tags in an HTML webpage

Is it possible to benefit from HTTP conditional requests when including a script in the head section of a page? My goal is to cache dynamically downloaded JavaScript files that are added to the head section using script tags. If this approach isn't fe ...

What steps are involved in creating a Public API for a vue.js application?

I am looking to create a Public API that allows users to control my vue.js plugin from external sources. <div id='app'></div> For instance, myApi.doThing() Any suggestions on how I can make this happen? ...

Creating a design with multiple `<thead>` and `<tbody>` elements

Seeking advice on usability and design elements. I am currently utilizing JQuery to hide/show entire sections within a single large table structure. The layout consists of multiple thead sections, with the main header at the top, followed by sub-headers fo ...

Unable to connect to the server launched by vue cli webpack-dev-server using localhost or 127.0.0.1

After setting up a new Vue project with vue/cli, I ran the command to start the development server with npm run dev. However, despite the output showing that the server is running on localhost:8080, I am unable to access it using either localhost:8080 or 1 ...

Loading node modules within Vue.js

As I venture into the world of Web Apps, I've taken it upon myself to learn using Vue 2 + Firebase technology. However, I find that explanations tailored for beginners would be incredibly helpful. My current objective is to display a list of buckets ...

What sets justify-content apart from align-items?

I'm really struggling to grasp the distinction between these two properties. After conducting some research, it appears that justify-content can handle... space-between and space-around, while align-items is capable of... stretch, baseline, initial, a ...

Should actions in Vuex be avoided from being called within other actions?

Trying to weigh my options for my Vue app. I'm torn between calling one action from within another action, or if that approach might get messy. Option one: store.js const actions = { funcOne (context) { //Perform an action contex ...

Strategies for optimizing PPI and DPI in responsive design

Imagine having two monitors: one 15.5 inches with a resolution of 1920 x 1080 and the other 24 inches with the same resolution. The first monitor has a pixel density of around 72 PPI, while the second has around 90 PPI. If I apply a media query in CSS for ...

Retrieve all choices from dropdown menu using a POST request

I'm working on a page that includes two select boxes. I need to transfer items from Select #1 to Select #2. After clicking the submit button, I want to retrieve all options from Select #2, regardless of whether they are selected or not. <?php req ...