Topic: Add custom class to Select

Marco Li Mandri priority asked 2 years ago

Expected behavior I need to override "text wrapping" in select option, in some cases. I can't add custom class to Select.

Actual behavior Genrated code of "select" doesn't contain original class of "Select".

Resources (screenshots, code snippets etc.)

Michał Duszak staff answered 2 years ago

It's not quite possible, but there is a trick which allows you to get the element basing on the text content of the option. Here is a snippet in which I use this technique:

document.addEventListener('', () => {
    setTimeout(() => {
        const allOptions = document.querySelectorAll('.select-option-text');
        const customOptions = Array.from(allOptions).filter(option => option.textContent === 'Two');
        customOptions.forEach(option => {
    }, 50)


Marco Li Mandri priority answered 2 years ago

Thanks for your answer. What if I need to customize only one option?

Marco Li Mandri priority commented 2 years ago

(with "option" I mean one single element of the select)

Michał Duszak staff answered 2 years ago

Hello, Select gets rendered individually, and doesnt inherit classes from your initial .select input element. You could for example use .select-option selector to change styles of all the options together.

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.10.2
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No