Как сделать свой цвет рамки в компоненте q-input, когда компонент не в фокусе

Question

Использую Quasar-Framework. Интересует возможность изменения цвета рамки q-input, когда он не в фокусе. По умолчанию, цвет рамки q-inputсерый, и только при фокусе обретает цвет, который был задан.

ps: q-input используется в режиме outlined

Answer 1

Цвета всех компонетов Quasar можно менять задавая css классы цветов у компонентов. Классы с префиксом bg- отвечают за цвет фона. Классы с префиксом text- отвечают за цвет текстового объекта (foreground). Например, если мы хотим у компонента сделать фон жёлтым а текс синим то делаем классы

class="bg-yellow text-blue"

Цвета берутся из Material Design палитры в Quasar.
Так же можно использовать predefined цвета из material design палитры primary, secondary, ascent, warning, negative, positive.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#q-app',
  data: {
    text: "Всем привет!"
  }
});

/* Цвет рамки по умолчанию */
.q-field__control::before {
  border-color: red !important;
  border-width: 2px !important;
}


/* Цвет рамки при наведении мыши */
.q-field__control:hover::before {
  border-color: green !important;
}


/* Цвет рамки при фокусе */
.q-field--focused .q-field__control {
  color: orange !important;
}

<div id="q-app">
  <div class="q-pa-md">
    <q-input class="bg-yellow my-border" label="Поле" outlined v-model="text"></q-input>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css">

PS: Обновил ответ. Многие цвета которые нельзя задать напрямую можно задать напрямую через стили Quasar селекторов изучая стили в DevTools F12 в браузере. Пример для стилей рамок в коде.

БЛОГ НА HUSL

Как сделать свой цвет рамки в компоненте q-input, когда компонент не в фокусе

Ответы (1 шт):