Customize a dojo's ComboBox

问题

How to add/replace some picture at the ▼ sign of dijit.form.ComboBox or dijit.form.FilteringSelect

and the picture can switch when mouse move in and move out.

And how to change popup's bg-color of the ComboBox.

Like this web site

(I need to copy like the original from that site. But this site use a custom widget then I don't know how to get the source.)

If anyone know how to customize like that please teach me. Thanks.

回答1:

Changing the look and feel of Dojo widgets is done using themes. http://dojotoolkit.org/reference-guide/1.7/dijit/themes.html

You can see the themes that ship by default at http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html (NOTE: This page is based on a nightly build, so soemtimes it is broken)

Themes are applied using CSS.
I'd create your own css style sheet. Add the theme name to the body node.

<body class="tundra myTheme">

The particular css you are looking for is

.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 */

Using the developer tools with your browser will help you determine the css classes that you are looking to override.

回答2:

I had looking at the code by closely then I found it's doesn't use dijit.form.ComboBox or dijit.form.FilteringSelect.

He used at normal HTML <div> <input> <a>

Here http://jsfiddle.net/fQZFr/

I have finished.

来源：https://stackoverflow.com/questions/10086869/customize-a-dojos-combobox

标签

css

dojo