@damiendeville Partial self-answer here. I almost managed to customize the q-input component styling to my local needs with the following code:
<style lang="stylus"> .q-input height 2.5em .q-if-label text-align right color orangeRed input[type="number"] height 1em color purple text-align right </style>
However, I still do not understand why I needed to add the [type=“number”] to the input selector to access the input element inside the q-input element.
But this code is not really legible, since neither the q-if-label component nor the input elements encapsulated in the q-input element appear in the vue template that this stylus code is styling. Is there any way to customize the appearance of a quasar component other than selecting in stylus sub-components and sub-elements internal to the component hence in effect breaking its encapsulation and making the code incomprehensible without inspecting the component 's internal DOM with a browser debugger?
Also, I tried to add an ellipsis to the placeholder and the following code just didn’t have any effect:
input[placeholder] text-overflow ellipsis
Any suggestion on this one?