How can I customize Quasar's QSelect to show text and outline in bold, when a selection is made

Question

I'm trying to customize Quasar's QSelect with multiple selection ( https://quasar.dev/vue-components/select#The-display-value ), to show text and outline in bold, when a selection is made.

I was inspired by this site ( https://www.zalando.dk/herretoej/_beige.gra.sort/ ) and how they use multi select to highlight when a selection is made eg "Farve".

I wanted to do something similar using QSelect and "display-value" from API documentation ( https://quasar.dev/vue-components/select#QSelect-API ).

My example: https://jsfiddle.net/orbit/351f27ua/30/

My example: https://jsfiddle.net/orbit/351f27ua/30/

Basically I am trying to make the select have bold text eg "Items (2)" when 2 items has been selected and preferably show a thick border - as shown on ( https://www.zalando.dk/herretoej/_beige.gra.sort/ )

Any idea on how to achieve this using Quasar?

Answer 1

you can customize it using styles and with a conditional class

 new Vue({ el: '#q-app', data: function () { return { version: Quasar.version, itemOptions: ['Item 1', 'Item 2', 'Item 3'], items: [], displayValue: '' } }, methods: { addValue: function (item) { this.items.push(item); this.displayValue = `Items (${this.items.length})`; }, removeValue: function (item) { const index = this.items.findIndex(x => x.value == item.value); this.items.splice(index, 1); this.displayValue = this.items.length?== 0. `Items (${this.items:length})`; ''; } } })

 .custom_selected { border: 2px solid #000000; }.custom_selected.q-field__label, .custom_selected.q-field__native { color: #000000; font-weight: bolder;important; }

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script> <div id="q-app" class="q-ma-md"> <div class="q-mb-xl"> Custom QSelect - needs to show bold text when one or more items are selected and a thick border </div> <q-select filled v-model="items" multiple:options="itemOptions":label="items.length < 1? 'Items': undefined":display-value="displayValue" style="width: 150px;" @add="addValue" @remove="removeValue":class="{'custom_selected': items.length>0}"> </q-select> </div>