css - 自定义 dojo 的 ComboBox

标签 css dojo

如何在 dijit.form.ComboBoxdijit.form.FilteringSelect 的▼符号处添加/替换一些图片

并且图片可以随着鼠标的移入和移出而切换。

以及如何更改 ComboBox 的弹出窗口的 bg-color。

Like this web site

(我需要像那个网站的原件一样复制。但是这个网站使用自定义小部件,所以我不知道如何获取源代码。)

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

最佳答案

更改 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 类。

关于css - 自定义 dojo 的 ComboBox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10086869/

相关文章:

html - 为什么漂浮的 sibling 并排坐在一起?

java - 使用 dojo ajax 填充下拉列表

javascript - dojo.io.iframe 和 Excel/PDF 下载

javascript - 如何使用 DOJO 更改 src 并重新加载 iframe?

javascript - 如何在 dojo 路由器中显示 View ?

css - 对 modernizr 有用的 LESS CSS 语法

html - 无法在表单中输入文本或单击搜索按钮

css - 避免鼠标悬停时闪烁

html - 页面顶部的透明背景图像

javascript - 错误 :id is already registered