Quasar Select dropdown required class

Question

I am trying to figure out how to set an asterisk(*) next to Quasar's Select component when it is "required".

I am able to do so just fine with Quasar's "input" component, but can't seem to replicate the behavior for their dropdowns.

I have tried using the :deep selector, and I can target the ".q-select" class directly and change the color of the component/etc, but can't seem to target the label or add a :required selector without it breaking.

example: https://codepen.io/Cori92/pen/dyrVEeR

.q-select__native[required]:invalid ~ .q-select__label:before {
  content: '* ';
  color: red;
}

Answer 1

I was able to get this working by adding a slot for the label on the q-select.

<template v-if="!hiddenValue" v-slot:label>
        <div class="no-selection">
          {{ props.label }}
        </div>
      </template>

css

.no-selection:before {
  content: '* ';
  color: red;
}