How to give the menus associated with dojo's dijit.ComboBox different css from those of dijit.Menu

Question

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?

Answer 1

I believe there is a id attached in the popup menu's container, and that id is created by adding "_popup" on its parent widget's id.

So the solution I suggest is that if your combox was unique in your page, then you can attach a fixed id on it, for example:

<select dojoType="dijit.form.ComboBox" class="foobar" id='myCombox'>[options]</select>

And the css will be

#myCombox_popup .dijitMenuItem { font-weight: bold; }
#myCombox_popup .dijitMenuItem .dijitComboBoxHighlightMatch { font-weight: normal; }

Answer 2

It turns out that the html from dijit.Menu uses a table structure, while the ComboBox uses a list, so we can make our css different for the two by using li.dijitMenuItem or tr.dijitMenuItem.