Topic: Select uses hard-coded color values

UNNdev priority asked 3 years ago

Expected behavior

The Select component always uses theme colors, no matter if blurred or focused, with or without its options expanded.

Actual behavior

The Select component uses hard-coded color values defined in mdb-ui-kit/src/scss/pro/_select.scss. Label, border, arrow, they use colors like #1266f1 or #4285f4 which collide with custom theme colors.The behavior is also somewhat faulty: if the Select component is focused, the label and the border have the right theme colors. If the Select component loses focus while its options are visible, the color turns to blue. The arrow is always blue while opened, though.

Resources (screenshots, code snippets etc.)

VDLP priority answered 2 years ago


We also have this issue with latest MDB 5 Vue Pro version.

Would be nice to remove all hard-coded colors and other values (like borders) and use sass-variabelen instead. Preferably the option for component vars with fallback on default vars like some other components and how Bootstrap does it.

$form-select-border-width: $input-border-width !default;

$input-border-width: $input-btn-border-width !default;

$input-btn-border-width: $border-width !default;

$border-width: 1px !default;

If you set $border-with: 2px and $primary: red; it changes the default state for inputs/select the correct way. But if you focus the input its border with 1px and #1266f1. Modifying vars for this (like $form-select-focus-width) do not work because of hard-coded valus.

This should work like you would expect. Now you can only fix it by nasty overrides.

Can you give an estimate when this can be fixed or what the focus is on issues like this?


Mikołaj Smoleński staff commented 2 years ago

Thanks for posting the issue. We're going to discuss your proposal and we'll let you know about the decision soon

Keep coding,  Mikołaj from MDB

Michał Duszak staff answered 3 years ago

By the time we make it more convenient, here's a quick CSS to customize those colors:

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.1
  • Device: All devices
  • Browser: All browsers
  • OS: All operating systems
  • Provided sample code: Yes
  • Provided link: Yes