Change border on focus

[Duncan]

Hi 

I'm trying to change the border (size and colour) when a combo / drop down list when it receives focus, I have looked at the visual style builder but this is not working very well at all. Does anybody know what css tags I need to override to get this to do what I'm looking for.

Thanks

Duncan

[Georgi Krustev]

Hello Duncan,

 
You will need to modify CSS class of the DIV element which wraps the visible input element and the button. Here is a code snippet which shows how to wire the focus and blur of the visible input and apply CSS class to the wrapper:

[JavaScript]:

function onComboBoxLoad(e) {
    $console.log('ComboBox loaded');

    $(this).closest(".t-combobox")
           .find("input:visible")
           .bind({
                focus: function(e) {
                    $(this).parent().addClass("boldCombo");
                },
                blur: function(e) {
                    $(this).parent().removeClass("boldCombo");
                }
           });
}

[Style]:

.boldCombo
        {
            border-width : 2px;
            border-color : Red;
        }

All the best,
Georgi Krustev
the Telerik team