Topic: Add custom class to Select

Marco Li Mandri priority asked 10 months 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 10 months 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 10 months ago

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

Marco Li Mandri priority commented 10 months ago

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

Michał Duszak staff answered 10 months 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

  • User: 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