How to give the menus associated with dojo's dijit.ComboBox different css from those of dijit.Menu
- by sprugman
When you use a dijit.ComboBox, the type ahead suggestions get implemented as a dijit.Menu. I've got a design which calls for the matched portion of the suggestion rows to be normal, and the unmatched portion to be bold. The structure that dojo creates is like this:
<ul class="dijitReset dijitMenu">
<li role="option" class="dijitReset dijitMenuItem">
<span class="dijitComboBoxHighlightMatch">Ch</span>oice One
</li>
<li role="option" class="dijitReset dijitMenuItem">
<span class="dijitComboBoxHighlightMatch">Ch</span>oice Two
</li>
</ul>
So I can target the matched part, but not the unmatched part. So my css needs to be something like:
.dijitMenuItem { font-weight: bold; }
.dijitMenuItem .dijitComboBoxHighlightMatch { font-weight: normal; }
The problem is, if I do that, all menus will be bolded, and I don't want that. Just doing something like this:
<select dojoType="dijit.form.ComboBox" class="foobar">[options]</select>
puts the foobar class in the ComboBox, but the menu is an independent node not under that hierarchy.
What's the easiest way to add a css class around the popup menu that the ComboBox generates?
