Как настроить цвет рамки и раскрывающегося списка для одного QSelect в Quasar? ⇐ CSS

[Anonymous]

Я работаю с Vue.js и Quasar и хочу настроить цвет границы и стрелки раскрывающегося списка для одного компонента QSelect, который находится в контурном режиме. Я хочу применить собственный цвет границы и изменить цвет стрелки раскрывающегося списка, но только для определенного QSelect, а не для всех экземпляров QSelect в моем компоненте.
Вот код, который я использую использую:
border: 1.25px solid var(--primary); /* Change the border color */
transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Target the dropdown arrow */
:deep(.q-field__append .q-icon) {
color: var(--primary); /* Change the dropdown arrow color */
}

/* Optionally, change the icon color on hover */
:deep(.q-field__append .q-icon:hover) {
color: var(--secondary); /* Change the dropdown arrow color on hover */
}````

The issue is that these styles are being applied globally, affecting all QSelect components in the scope. I want to limit these styles to a single QSelect by using a custom class or any other method to prevent all QSelect components from being styled in the same way.

How can I apply these custom styles to only one QSelect instance?

Thanks in advance for your help!



Подробнее здесь: https://stackoverflow.com/questions/790 ... ct-in-quas