Topic: Add custom class to Select
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.)
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.
Thanks for your answer. What if I need to customize only one option?
Marco Li Mandri pro premium priority commented 3 years ago
(with "option" I mean one single element of the select)
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:
https://mdbootstrap.com/snippets/standard/m-duszak/3634023#js-tab-view
document.addEventListener('open.mdb.select', () => {
setTimeout(() => {
const allOptions = document.querySelectorAll('.select-option-text');
const customOptions = Array.from(allOptions).filter(option => option.textContent === 'Two');
customOptions.forEach(option => {
option.classList.add('custom-option')
})
}, 50)
})
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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