mdb-select style not working as documented

Topic: mdb-select style not working as documented

Alejandro Medero pro premium asked 3 years ago

EDIT: I'm using 7.5.4. (when making a question i can select only up to version 7.5.1)

EDIT 2: Added another bug in the mdb-select component at the bottom of my question.

Expected behavior: As documented in mdbootstrap select doc for Angularenter image description here

Actual behavior: On hover has no shadow effect and non selected options have blue text color.

Resources (screenshots, code snippets etc.)

<div class="row">
  <div class="col-md-6">
    <mdb-select [options]="colorSelect" label="danger select" placeholder="Choose your option" class="colorful-select dropdown-danger"></mdb-select>

enter image description here

enter image description here

EDIT: There is also a bug in the styling of the mdb select when using the filtersEnabled attribute. enter image description here

Damian Gemza staff commented 3 years ago

Dear @Alejandro Medero

Thanks for your report! We'll take a look at this.

Best Regards,


Alejandro Medero pro premium commented 3 years ago

Thanks @Damian Gemza

Do you have an ETA for this or at least a hard fix like overriding styles in scss ? I tried to override the style with no success.

I edited my question to add another issue in the styling of the mdb-select component when you use "filtersEnabled". It's like there is no margin from the filter input underline and the options or the "no results found" message when there are no results.

Alejandro Medero pro premium commented 3 years ago

@Damian Gemza Any news on this? status? any hard fix for the meantime?

Damian Gemza staff answered 3 years ago

Dear @Alejandro Medero

About first two problems, please add those styles to the global styles.scss stylesheet:

.select-dropdown li {
  &:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
  span {
    color: black !important;

About the last problem: I have tried to reproduce it on Firefox@Ubuntu, Chrome@Ubuntu, Chrome@Macbook (browserstack live preview), and there's no such problem.

Could you please describe me, how can I reproduce this problem?

Best Regards,


vitticeps answered 3 years ago


I am experiencing issues with the select as well.

enter image description here

Also you can see a sort video how it's behaviour -

vitticeps commented 3 years ago

I needed to put the mdb-select between div.mdb-form tags.. and its fine...

For the box-shadow.. i need to use your css-hack

Damian Gemza staff commented 3 years ago

That's not a hack, but normal css styling. But I'm glad that your problem is resolved.

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
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: Macbook Pro
  • Browser: Chrome
  • Provided sample code: No
  • Provided link: No