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>

    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;

  • @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