Closed Nisgrak closed 2 years ago
In order for input-class
prop to make sense you first have to tell your QSelect
to use the input itself, by adding the use-input
prop.
https://codepen.io/milospaunovic/pen/BamqogM
This still doesn't work like a native dropdown <select> element. If I do this:
.my-select {
color: slateblue;
background-color: lightcyan;
}
<select class="my-select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
I get fuchsia text on a light cyan background, as expected:
But in the CodePen listed above, the style is applied only to the portion of the input not occupied by the option label. The label remains as black text on bg-color
background.
Updated CodePen including the native <select> element: https://codepen.io/Steve-OH/pen/ExLRZQq
@Steve-OH You could play with styling props to achieve what you want. https://codepen.io/milospaunovic/pen/rNvKvON
@MilosPaunovic Thanks. However, using your code example, after you make a selection, the text of the selection is still black:
I can't find a property that will fix that.
Use selected slot for that: https://codepen.io/milospaunovic/pen/rNvKvON?editors=1010
What happened?
The prop
input-class
dont work, the class dont apply to the input.What did you expect to happen?
The input has the class thats is given in the input-class prop
Reproduction URL
https://codepen.io/Nisgrak/pen/jOavdzz
How to reproduce?
Flavour
Quasar CLI (@quasar/cli | @quasar/app)
Areas
Components (quasar)
Platforms/Browsers
Firefox, Chrome, Safari, Microsoft Edge, iOS, Android, Electron
Quasar info output
Relevant log output
No response
Additional context
No response