Making inputs bordered



  • Hello!

    I’m loving Quasar (and Vue)! After struggling with several half-baked UI frameworks on React, this is just blissful!

    I have a quick question - I’m doing a forms-heavy application and wanted to style my text fields and selects with a full border, instead of just the border underneath. I tried to fiddle with several CSS classes - .q-if, .control, .q-input, but nothing seemed to make sense.

    Is there a recommended way to do it (and to disable the border underneath)?

    Thank you all!



  • The style for the current border is defined in the input-frame stylus file. It is made by using the after pseudo classes. I guess your best bet is to remove this after classes and instead use a normal border.



  • Apparently, this was much simpler than I had thought.

    All I had to do was use these classes and applied the desired style to them

    q-if-inverted
    q-if-inverted-light

    0_1524768825736_Screen Shot 2018-04-26 at 7.53.07 PM.png

    0_1524768889346_Screen Shot 2018-04-26 at 7.54.18 PM.png