@bkirvin

What you want is very possible with the right css knowledge. But yes changing the looks of Quasar component’s can sometimes be quite difficult.

You can use other vue components in Quasar app’s with little to no problem. Just do not expect to implement complete UI libraries like Vuetify (without css conflicts).

Using a standard non vue/quasar input will make things a bit more difficult I guess but here’s a simple demo how you can create a vue component from just an input:

https://stackoverflow.com/questions/50857231/vue-js-extend-standard-input-control-e-g-textarea

@dobbel Just as @bkirvin said above.

I use Chrome inspector to find what style apply to the element.

I click on the divs in the source tab and look at the computed styles. I start on the outmost div and work my way in. As I click on the divs I am observing the computed styles and looking for “borders” or “outline” styling.

If I can not locate where they come from I start looking at the after and before elements too.

Once I located the styling I open it and copy paste the exact css which is targeting the element and use that to add my own style.

Screen Shot 2020-11-08 at 19.28.16.png

Oh and sometimes it helps if you force element state like in the case of hover you can not hover the object and navigate the source code at the same time.

Screen Shot 2020-11-08 at 19.38.32.png