Apply CSS inside q-input elements

[NikTang]

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?

[bestog]

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

[benoitranque]

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

[NikTang]

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

[NikTang]

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