Combo working like Select

I'm continuing to fine-tune the use of the combo control in my ActiveWidgets application, using the following function:

<code>
function set_combo_behavior(combo)
{
var edit_box = combo.getContent("box/text");
edit_box.setAttribute("readonly",true);
combo.onControlEditStarted = function() {
var element = this.getContent("box/text").element();
element.contentEditable = false;
element._onkeydown = document.onkeydown;
document.onkeydown = combo_field_onkeydown;
element.onblur = combo_field_onblur;
}
combo.AW_showPopup = combo.showPopup;
combo.showPopup = function() {
this.AW_showPopup();
var selected_item = this.getSelectedItems();
var AW_onCurrentItemChanged = this.onCurrentItemChanged;
this.onCurrentItemChanged = null;
this.setCurrentItem(selected_item);
this.onCurrentItemChanged = AW_onCurrentItemChanged;
}
edit_box.setEvent("onclick", function() { this.showPopup(); });
combo.type_select = '';
combo.last_key_time = 0;
combo.delay_enabled = false;
combo.waiting_type_ahead = false;
}
</code>

The only problems I'm still having involve highlighting in the edit field and highlighting the selected item in the list when the dropdown list is displayed. The "setCurrentItem" call above at least scrolls the dropdown list to the correct part of the list when it pops up, but I have been unable to find any way to highlight the selected item. Also, when the user tabs into the combo field, if the currently selected item is blank, the edit field is not highlighted, which is confusing to the users. Is there a way to highlight the entire combo edit field, regardless of the length of the text in the combo edit field?

try these

.aw-popup-window .aw-items-selected {
    color: #fff;
    background: #316ac5;
}

.aw-edit-control {
    background: #316ac5;
}

You may need combo #id for the last one otherwise it will affect all input boxes as well, something like

#myCombo.aw-edit-control {
    background: #316ac5;
}

Alex,

The .aw-items-selected change works just fine, but I'm running into some issues with setting the .aw-edit-control style for the combo controls. As you surmised, I do need to set the #id as part of the style unless I want to affect all input boxes, but I'm running into two problems with this that I'm hoping you can help me with. First, since I have dozens of combos all over the application, I would prefer to add the new style in one place, namely, the "set_combo_behavior" JavaScript function outlined above that I use to set up all combo controls. To this end, I tried to use the "addRule" function (in IE) to add the style dynamically when I set up the combo control. Unfortunately, the addRule function doesn't seem to like the format "#myCombo.aw-edit-control" and it converts it into ".aw-edit-control#myCombo" in the style sheet itself, which needless to say, doesn't work very well. I tried the format "#myCombo .aw-edit-control" (with a space in the middle), which addRule didn't mangle, but the style doesn't do anything when in that format. Is there any way to create the .aw-edit-control style for a specific combo id using the addRule function?

The second problem involves the background color of the combo edit field. Most of the combo edit fields in the application have a custom background color set using the "combo.setStyle("background-color",...)" function. That seems to prevent the .aw-edit-control style from doing anything. Is there a way to have a specific background color in the combo edit field when the field does *not* have the focus, and then a different specific background color when the field *does* have the focus?

Another solution could be adding custom class in onControlEditStarted event and removing it in onControlEditEnded.