1

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.

OammieR
  • 2,800
  • 5
  • 30
  • 51

2 Answers2

4

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.

Craig Swing
  • 8,152
  • 2
  • 30
  • 43
  • Thanks @Craig Swing, but I forgot to ask about how to switch the image when mouse move in and move out. – OammieR Apr 11 '12 at 02:01
  • _And +1 to you for the new knowledge._ – OammieR Apr 11 '12 at 04:16
  • I updated the css to show the hover and active styles for a ComboBox. The Dojo controls all use the same technique with hover and active. There are other 'states' and you see more in the base mixin - dijit._CssStateMixin. – Craig Swing Apr 11 '12 at 14:20
0

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.

OammieR
  • 2,800
  • 5
  • 30
  • 51