css - 如何为与 dojo 的 dijit.ComboBox 关联的菜单提供与 dijit.Menu 不同的 css

Question

当您使用 dijit.ComboBox 时，提前输入建议将作为 dijit.Menu 实现。我有一个设计要求建议行的匹配部分是正常的，不匹配的部分是粗体。 dojo 创建的结构是这样的:

<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>

所以我可以定位匹配的部分，而不是不匹配的部分。所以我的 css 需要是这样的:

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

问题是，如果我这样做，所有 菜单都会加粗，我不希望这样。只是做这样的事情:

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

将 foobar 类放在 ComboBox 中，但菜单是不在该层次结构下的独立节点。

在 ComboBox 生成的弹出菜单周围添加 css 类的最简单方法是什么？

Answer 1

我相信弹出菜单的容器中附加了一个 id，该 id 是通过在其父窗口小部件的 id 上添加“_popup”来创建的。

所以我建议的解决方案是，如果您的组合框在您的页面中是唯一的，那么您可以在其上附加一个固定的 id，例如:

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

CSS 将是

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