Modifying the ComboBox Background Images

5 posts, 1 answers
  1. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 03 Apr 2012 Link to this post

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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Apr 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2012 Link to this post

    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!

     

     

     

     

  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2012 Link to this post

    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-imageurl("../Images/bullet5.jpg") !important;
        }
      .RadComboBox_Default .rcbFocused  .rcbArrowCell
        {
          background-imageurl("../Images/Desert.jpg") !important;
        }
    </style>

    Regards,
    Princy.
  6. Michael O'Flaherty
    Michael O'Flaherty avatar
    67 posts
    Member since:
    Jun 2010

    Posted 05 Apr 2012 Link to this post

    Worked like a charm -- thanks! I must not have had the right combination.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017