If the initial element is not a typical item, such as a Select all, you can achieve it using the prepend-item slot. Check out this link for more information.
To style only the first item in red, you can utilize the :first-child selector. By setting a content-class through menu-props, you can add a suitable CSS class to the menu itself.
The following example showcases both of these methods:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: ['Item A', 'Item B', 'Item C'],
selected1: [],
selected2: []
}
}
})
.red-text {
color: red;
}
.red-first-item .v-list-item:first-child .v-list-item__title {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04626b6a7044372a3d2a3d33">[email protected]</a>/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6a697968757a655c2e322c322d25">[email protected]</a>/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6c3b1adb5adb2b3">[email protected]</a>/dist/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42343727362b243b02706c726c737b">[email protected]</a>/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-select
v-model="selected1"
:items="items"
chips
label="Some Items"
multiple
outlined
cache-items
>
<template v-slot:prepend-item>
<v-list-item>
<span class="red-text">Red item</span>
</v-list-item>
</template>
</v-select>
<v-select
v-model="selected2"
:items="items"
chips
label="Some Items"
multiple
outlined
cache-items
:menu-props="{ contentClass: 'red-first-item' }"
>
</v-select>
</v-container>
</v-content>
</v-app>
</div>
Alternatively, the item slot can be utilized to customize the look of all items. However, this may be excessive just to make one item appear in red.
I recommend taking a look at the source code:
View here for more insights
You don't need to comprehend everything, but it can provide an understanding of how the component functions and constructs its menu.