CODEWITHSUNDEEP
cssasp-classiccomboboxtelerikradcombobox
Mehdi Bugnard
Mehdi Bugnard

Reputation: 3979

How to change the color of item selection radcombobox with a css style?

I was wondering if was possible to change the value of "background-color" for the selection of a radCombobox.

Here is the css code I used: (I can change everything but not the color of highlighted items ....)

div.RadComboBox_Metro .rcbInputCell INPUT.rcbInput
{
    background-color: #9BCDFF;
}

"Metro" being the name of the "skin" of my radcombobox

Thanks to all

EDIT- 12-12-2012 Finally after a complete headache and several tries. My code below works for the first item highlighted, but not for others .... Have you any idea why? Thanking you in advance

function cmbx_dbListUserOnClientSelectedIndexChanged(sender, args) {
                    var combo = $find("<%= cmbx_dbListUser.ClientID %>");
                    var highlightItem =  combo.get_highlightedItem();
                    if(highlightItem != null)
                    {
                        highlightItem.get_element().style.backgroundColor = "#9BCDFF";
                    }
                }

Upvotes: 1

Views: 3840

Answers (2)

Mehdi Bugnard
Mehdi Bugnard

Reputation: 3979

Finally after a complete headache and several tries. My code below works

div.RadComboBoxDropDown_Metro .rcbHovered 
{
    border: 1px #7FB8FF !important;
    background-color: #7FB8FF !important;
}
.RadComboBox_Metro .rcbFocused .rcbArrowCell, .RadComboBox_Metro .rcbFocused .rcbReadOnly .rcbInputCell, .RadComboBox_Metro .rcbFocused .rcbReadOnly .rcbArrowCellHidden {
    background-color: #7FB8FF !important;
    border: 1px #5B85B7 !important;
}

Upvotes: 1

DeeDub
DeeDub

Reputation: 1662

From my experience, and what I gathered, the only option for this is going to be a little javascript/jquery code:

$(".someSelect").change(function(ev){
     var targ = ev.target.selectedOptions[0];
    if($(targ).val() == $(targ).text()){
        $(".selected").removeClass('selected');
    }else{

    $(targ).parent().addClass('selected');
    $(targ).siblings('.selected').removeClass('selected');
    $(targ).addClass('selected');
}
});​

Here is the fiddle

Upvotes: 1

Related Questions