Can we have this kind of q-input & q-select design ?

[jitendra16]

[tof06]

Do you mean, the * before label on required fields ? Yes, you can with a little help of CSS :
https://codepen.io/cp-tof06/pen/Vwvpayw

.required .q-field__label:before {
  content: '*';
  color: #f00;
}

and add required class to your q-input or q-select

[jitendra16]

@tof06
No i didn’t mean that. i mean label as a part of outlined box. As of now we have following designs in quasar https://quasar.dev/vue-components/input#Example--Design-Overview, I want this popular design also.

[tof06]

@jitendra16 I updated my pen.

Please note that I’m not an expert in CSS… So, there may be better solutions.

Edit: I just read material design guidelines, and for outlined text fields, the label should be on the outlined box. So, maybe it should be a default in quasar ?

[s.molinari]

This was asked for in GH and turned down by the devs. If you want it, you’ll have to do it on your own. It’s one of the rare instances where Quasar doesn’t follow the Material spec.

Scott

[jitendra16]

@tof06 Thank you, this is what I needed. Can you add q-select also in your codepen.

[tof06]

q-select is based on q-field, so, you don’t need anything more. Just add the class my-input or whatever you named it to q-select : https://codepen.io/cp-tof06/pen/Vwvpayw

[jitendra16]

@tof06 Please check that it is not looking good on selection value. it is not horizontal center like q-input.

[dobbel]

@s-molinari Quasar claims it follows the Material Guidelines as THE second main feature. It’s on the first page of de doc:

“You get a state of the art UI (that follows Material Guidelines) for your websites and apps out of the box”

https://quasar.dev/introduction-to-quasar

btw I am a very happy Quasar user!

[s.molinari]

@tof06 - Nice work. Just one issue. When the background color is anything other than white, then it looks “off”, as the label’s background stays white.

https://codepen.io/smolinari/pen/abvwQzR?editors=1010 (use the color picker at the top to change the background color).

Nice attempt nonetheless.

Scott

[jitendra16]

@s-molinari One more issue is that q-select text in not vertical centered.

[tof06]

@s-molinari said in Can we have this kind of q-input & q-select design ?:

@tof06 - Nice work. Just one issue. When the background color is anything other than white, then it looks “off”, as the label’s background stays white.
https://codepen.io/smolinari/pen/abvwQzR?editors=1010 (use the color picker at the top to change the background color).
Nice attempt nonetheless.
Scott

Yes, I was aware of this issue… But my CSS knowledge is limited And I don’t know how (even if it is possible) to get parent background color… If somebody knows, I’ll be happy to learn something new

@jitendra16 said in Can we have this kind of q-input & q-select design ?:

@s-molinari One more issue is that q-select text in not vertical centered.

Pen updated.

Once again, I’m not a CSS expert. So, I try to adjust code using Chrome’s devtools. But I may miss important style somewhere.