Apply CSS inside q-input elements



  • I have two q-input elements:

    <q-input class="login-input" v-model="username" stack-label="Username"  />
    <q-input class="login-input" v-model="password" type="password" stack-label="Password" />
    

    I managed to increase the font size of the label and input box by using scoped style:

    <style scoped>
    .login-input{
        font-size:1.5rem;
        line-height:1.5rem;
    }
    </style>
    

    I also want to increase the gap between the label and the text box, so I added this

    .login-input input{
        margin-top: 10px;
    }
    

    No matter what I put in the CSS attribute in this block, It seems not taking any effect. What’s the proper way to style the elements inside q-input?



  • Have you ever tried “!important” after each css attribute? Same result?



  • <style scoped>
    .login-input > div {
        padding-top: 20px;
    }
    </style>
    


  • @bestog @benoitranque Both suggestions do work. Actually in developer tool, when I look at all CSS attributes of the input element inside .login-input, my settings do not even appear in the list. Very weird. I got a feeling that the browser is not able to match those generated elements with my CSS properly.



  • Finally I managed to fix this by moving the settings from scoped style to global style.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.