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.