自定义 dojo 的 ComboBox答案

【问题标题】：Customize a dojo's ComboBox自定义 dojo 的 ComboBox
【发布时间】：2012-04-11 22:18:25
【问题描述】：

如何在dijit.form.ComboBox或dijit.form.FilteringSelect的▼标志处添加/替换一些图片

鼠标移入移出时图片可以切换。

以及如何改变ComboBox的popup的bg-color。

Like this web site

（我需要像从那个站点复制原件一样。但是这个站点使用自定义小部件，然后我不知道如何获取源代码。）

如果有人知道如何自定义，请教我。谢谢。

【问题讨论】：

标签： css dojo

【解决方案1】：

更改 Dojo 小部件的外观和感觉是使用主题完成的。 http://dojotoolkit.org/reference-guide/1.7/dijit/themes.html

您可以在以下位置查看默认发布的主题 http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html （注意：此页面基于夜间构建，因此有时会损坏）

使用 CSS 应用主题。
我会创建自己的 CSS 样式表。将主题名称添加到正文节点。

<body class="tundra myTheme">

您正在寻找的特定 css 是

.myTheme .dijitComboBox .dijitDownArrowButton {} /* The grey box */
.myTheme .dijitComboBox .dijitDownArrowButton .dijitArrowButtonInner { /* The arrow */
   background: url(images/spriteArrows.png) no-repeat scroll 0 center;
} 

/* Hover */
.myTheme .dijitComboBox .dijitDownArrowButtonHover {} /* The grey box */
.myTheme .dijitComboBox .dijitDownArrowButtonHover .dijitArrowButtonInner {} /* The arrow  */

/* Active (mouse down) */
.myTheme .dijitComboBox .dijitDownArrowButtonActive {} /* The grey box */
.myTheme .dijitComboBox .dijitDownArrowButtonActive .dijitArrowButtonInner {} /* The arrow */

在您的浏览器中使用开发人员工具将帮助您确定要覆盖的 css 类。

【讨论】：

感谢@Craig Swing，但我忘了问鼠标移入移出时如何切换图像。
为你的新知识 +1。
我更新了 CSS 以显示 ComboBox 的悬停和活动样式。 Dojo 控件都使用相同的悬停和活动技术。还有其他“状态”，您可以在基本 mixin 中看到更多 - dijit._CssStateMixin。

【解决方案2】：

我仔细查看了代码，然后发现它没有使用 dijit.form.ComboBox 或 dijit.form.FilteringSelect。

他在普通 HTML 中使用 <div> <input> <a>

这里http://jsfiddle.net/fQZFr/

我已经完成了。

【讨论】：