Modifying the ComboBox Background Images

[Michael O'Flaherty]

Hi!

I am able to modify the background image of the combobox using this css (images attached). However, we loose the hover and focus image (see results.png for the focus problem.)
 
How do I change the images for the various states? Thanks!

Michael

.radComboBox td.rcbInputCell

{

    background-image: url('/Images/ComboBoxSprite.png') !important;

}

.radComboBox table td.rcbArrowCell

{

    background: #ffffff url('/Images/ComboBoxDropDown.png') no-repeat -1px 50%;

}



[Princy]

Hi,

Try overriding the default css using "!important" as follows.

CSS:

<style type="text/css">
 .RadComboBox_Default .rcbInputCell
  {
    background-image: url("../Images/ComboBoxSprite.png") !important;
  }
 .RadComboBox_Default .rcbArrowCell
  {
    background: #ffffff url("../Images/ComboBoxDropDown.png") no-repeat -1px 50% !important;
  }
</style>

Hope this helps.

Thanks,
Princy.

[Michael O'Flaherty]

That oversight does solve the flashing. Is it possible to override the images when the control gets focus, and if so, how? I have tried 'rcbFocused' as well as ':focus' and I can't seem to find the combination. Thanks!

 

 

 

 

[Princy]

Hi,

Try the following CSS to override the InputCell and ArrowCell images when the RadComboBox gets focus.

CSS:

<style type="text/css">
  .RadComboBox_Default .rcbFocused  .rcbInputCell
    {
      background-image:  url("../Images/bullet5.jpg") !important;
    }
  .RadComboBox_Default .rcbFocused  .rcbArrowCell
    {
      background-image:  url("../Images/Desert.jpg") !important;
    }
</style>

Regards,
Princy.

[Michael O'Flaherty]

Worked like a charm -- thanks! I must not have had the right combination.