customize q-input element

[leostereo]

Hi guys , I need to customize my q-inputs for login page.
I already managed to set background color and label color but can not control:
outline color , outline radius.
Also would like to set colors when focused.
already check on some links but can not get it working.
Is it worthy to try to make it work or should I create my own input text field ?.

Thanks for the advise!!!
Leandro.

[ontwikkelfabriek]

@leostereo
It's all css, use the inspector to see what is what and you could change anything. ( not sure you should but that is another topic)

[leostereo]

Hi @ontwikkelfabriek ;
Thanks for your advice , I was trying with the inspection tools but could not make it.
I can see there are a lot of divs and sub divs with a lot of css properties.
In this case the q-input has 3 behaviours wich I would like to customize.
1 normal view.
2 hover view.
3 When click view.
I tried also using style filter on browser (firefox) console, but nothing match with hover , active or focus. I will try with chrome later.
Also noticed that can edit the .q-field--outlined .q-field__control if no "scoped" applied.
Then I can chance the border radius propperly , if I set the border widht or color here it produced an undesired double line.
So ...
I think Im very far but still trying.
Thanks.

[leostereo]

using chorme inspector had much more luck !!!
for instance:
.q-field--outlined .q-field__control:hover:before {
border-color: green;
}
can control border when hover.

[leostereo]

and finally all of them:
`.q-field--outlined .q-field__control:before {
border: 3px solid #375F7D;
transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-field--outlined .q-field__control:hover:before {
border-color: #375F7D;
border-width: 3px;
}

.q-field--outlined .q-field__control {
padding: 0 12px;
border-radius: 15px;
border-width: 3px;

}`