I am using select2 drop down. Some of the options are disabled and I would like to change the font of the disabled options. How do I do that in select 2? Where do I specify the class for those options?
Disabled items in a Select2 look like this: <li class="select2-results__option" id="select2-td9s-result-68sf-two" role="option" aria-disabled="true" data-select2-id="select2-td9s-result-68sf-two">Second (disabled)</li>
Select2’s own CSS uses this rule to style disabled items:
.select2-container--default .select2-results__option[aria-disabled=true] {
color: #999;
}
So you could override that with a CSS rule like the following:
.select2-container--default li.select2-results__option[aria-disabled=true] {
/* your styles here */
}
The rule I proposed has higher specificity than the Select2 CSS rule, so it should take precedence.