QSelect input-class dont work

[Nisgrak]

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?

1. Create a QSelect
2. Add the input-class prop
3. See any of the internal elements have the class given

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, iOS, Android, Electron

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 14.17.3

Global packages 
  NPM - 6.14.13
  yarn - 1.22.11
  @quasar/cli - 1.2.2
  @quasar/icongenie - 2.4.2
  cordova - Not installed

Important local packages
  quasar - 2.5.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.3 -- Quasar Framework local CLI
  @quasar/extras - 1.12.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.2 -- Babel compiler core.
  webpack - 5.68.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - 3.4.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 3.4.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 3.4.1 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - *******
  Ethernet - 192.168.1.102

Relevant log output

No response

Additional context

No response

[MilosPaunovic]

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

[Steve-OH]

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

[MilosPaunovic]

@Steve-OH You could play with styling props to achieve what you want. https://codepen.io/milospaunovic/pen/rNvKvON

[Steve-OH]

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

[MilosPaunovic]

Use selected slot for that: https://codepen.io/milospaunovic/pen/rNvKvON?editors=1010