How do you set a class on a specific toolbar item

I would like to change the style/look of the buttonSelect item so it looks more like a dropdown combo box while not being hovered on. Problem is I can’t find a setting, class or ID I can attach any CSS statements to that is unique to a specific type of toolbar element. Any CSS I try to modify will affect other elements in the doolbar.

Looking at the generated source, this appears to be the chain leading to the root of the select item:

TD dhtmlxToolbarItem

TABLE [unnamed]

TABLE itemDefault

TD dhtmlxToolbarTEXT

selected text



TABLE itemDefault

TD dhtmlxToolbarArrow

DIV dhtmlxToolbarArrow

Arrow Image






This same structure is present with the same IDs/Classes for a button element. So this means there is no unique ID or class to differentiate the two. Is there a way to assign a class or HTML ID to a specific element? What I would like is a way to assign a unique ID or class to the parent unnamed table. With that I can apply styles specifically to that toolbar element.

For example:

webBar[ RowID ].setItemClass( ItemID, “SomeCustomClass” );

Any ideas?

You can try to use the following approach:

if (toolbar.objPull[toolbar.idPrefix+itemId][“type”] == “buttonSelect”){
var item = toolbar.objPull[toolbar.idPrefix+itemId];
item.obj.className = “…”; /class for text/
item.arw.className = “…”; /class for arrow/

Problem with that approach is you don’t get a class on the surrounding table around both the text and the arrow so you can border the whole element to look like a dropdown.

I modded a line in the JS file to apply a class to the parent table (around line 1090 in v.2.0 build 81107 :
    this.obj.innerHTML = “

I saw no reason adding a class to the parent table would possibly break anything.

It results in the ability to style the root table element as well as the children of it: (screenshot)
Your toolbar is being used as part of a quick order form on a site thats currently in development.  Each row is a new toolbar forming a toolbar array thats loaded via XML generated by an ASP product lookup script.


it seems that you’ve already found the solution for the issue… Am I right ?

Yes, but it would be nice to be able to do this without modifying your JavaScript.  Since applying a class to the root table shouldn’t cause any errors, perhaps putting one on it by default would be a good idea for the next release?


the latest toolbar version doesn’t contains table tags. It is different from the 81107. Buttons are div elements with a certain css class.

I’m not sure what the right approach is after reading this post… but then this post is old so maybe there is a better way to do it now?

I need to be able to modify a buttonSelect object’s style as follows:

background color
font size, type, color

I’ve tried the suggestion

var item = toolbar.objPull[toolbar.idPrefix+‘buttonID’];
item.obj.className = “buttonSelectStyle”;

where “buttonSelectStyle” is a class containing these style attributes.

This code executes but doesn’t seem to have any effect.

(I tried setting text to green to see if it made a difference. I see green flash for a split second when screen is refreshed but then it reverts to default style)

What is the recommended approach?

Do you want change the style of a certain select or all selects in a toolbar ?

All selects in the toolbar…

Also, how to change style for a textitem on the toolbar? (eg, make font bold)…

thank you.

You may redefine css classes the are defined in the dhtmlxtoolbar_dhx_skyblue.css

.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_btn {

.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_btn.over {


Styles for text button:

.dhx_toolbar_base_dhx_skyblue div.dhx_toolbar_text{


Thank you that works great!