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:
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)
})
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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