changing color of label in q-input

  • Hi,

    I am using the latest quasar framework. I want to change the colour and font size of the stacked label in a q-input field.
    Changing the in the css doesn’t seem to take effect. Any local styling apply only to the input text and not to the label.
    how to solve this problem?


  • I can’t see an easy way to do it using component properties, so this is what I am using instead:

    .q-if-label {
        color: #FFF;
    .q-if::before {
       border-color: #FFF;

  • Don’t use a scoped style. However, if you do this, then all labels in all your q-inputs will be affected. If you give your q-inputs an id then you can do it scoped.
    Here’s an example for q-table:

      #alerts .q-table thead,
      #alerts .q-table tr,
      #alerts .q-table th,
      #alerts .q-table td {
        height: 24px !important;

Log in to reply