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

[Mehdi]

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

[Princy]

Hi Mehdi,

Try overriding the default CSS using !important as follows to achieve your scenario.

CSS:

<style type="text/css">
    .RadComboBox_Metro .rcbInputCell
    {
        background-color: #9BCDFF !important;
    }
</style>

Hope this helps.

Regards,
Princy.

[Mehdi]

Hello,
Thank you very much for your quick response. But that does not change the color of highlighted items only item being handpicked.
Do you have any idea about it?

[Princy]

Hi Mehdi,

I suppose you want to highlight the selected RadComboBoxItem in the dropdown of RadComboBox. Please take a look into the following code.

JS:

<script type="text/javascript">
    function OnClientSelectedIndexChanged(sender, args) {
        var item = args.get_item();
        item.get_element().style.backgroundColor="#9BCDFF";
    }
</script>

Please elaborate your scenario if it doesn't helps.

Regards,
Princy.

[Mehdi]

This code changes the background correctly in my element! But the background color is changed only when the index selection has changed! and not for the overview (highlight) of my items.
Perhaps there is no solution for this problem. Should be used as a client function ("onClientHighlightedItemChanged") does not exist unfortunately.

I have try this with the "get_highlightedItem()"
but no result..

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

[Mehdi]

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";
              }
 }

[Mehdi]

Finally,Finally ,Finally ,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;
}

[Eon]

Thanks Mehdi,

 

Your CSS solution also worked for me.