Replacing the Arrow Image in the ComboBox

3 posts, 0 answers
  1. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 12 Jun 2013 Link to this post

    I am trying to replace the arrow image on the ComboBox control to match the rest of the page I am working on.  I am able to do this for the most part.  However, it appears as though the original white triangle remains no matter what.  I have tried the following CSS rules, and have not had any success.  I have attached both an image of the problem and the original image I am using for the background.  I need to get rid of the extraneous white arrow.  Any help would be appreciated.!
    Here are the CSS rules I have tried:

    div.RadComboBox_SST_Touch .rcbArrowCell {
        width: 26px!important;
        min-width: 26px!important;
        height: 100%!important;
        min-height: 100%!important;
        background: url('ComboBox/bc-arrow.gif')!important;
        background-image: url('ComboBox/bc-arrow.gif')!important;
        background-color: #ffffff;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        background-size: cover!important;
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: center;
        background-position-y: center;
    }
     
     div.RadComboBox_SST_Touch table td.rcbArrowCell {
        width: 26px!important;
        min-width: 26px!important;
        height: 100%!important;
        min-height: 100%!important;
        background: url('ComboBox/bc-arrow.gif')!important;
        background-image: url('ComboBox/bc-arrow.gif')!important;
        background-color: #ffffff;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        background-size: cover!important;
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: center;
        background-position-y: center;
    }
     
     div.RadComboBox_SST_Touch table td.rcbArrowCellRight {
        width: 26px!important;
        min-width: 26px!important;
        height: 100%!important;
        min-height: 100%!important;
        background: url('ComboBox/bc-arrow.gif')!important;
        background-image: url('ComboBox/bc-arrow.gif')!important;
        background-color: #ffffff;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
        background-size: cover!important;
        background-repeat: no-repeat;
        background-position: left;
        background-position-x: center;
        background-position-y: center;
    }
  2. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 12 Jun 2013 Link to this post

    A day and half looking at this, and i find the answer after posting about it :|.  I needed to change

    .RadComboBox_SST_Touch .rcbArrowCell a{
        width:28px;
        height:34px;
        background-image:url('Common/radActionsSprite.png');
        background-position:-111px -58px;
        background-repeat:no-repeat;
        height: 26px!important;
    }

    to

    .RadComboBox_SST_Touch .rcbArrowCell a{
        width:28px;
        height:34px;
        background-image:url('ComboBox/bc-arrow.gif');
        background-position:-111px -58px;
        background-repeat:no-repeat;
        height: 26px!important;
    }
  3. Brian
    Brian avatar
    13 posts
    Member since:
    May 2013

    Posted 18 Jun 2013 Link to this post

    I don't need "credit" for answering my own question, but could someone please mark this thread as answered?  I don't want to waste people's time with looking through it to answer it, and I don't want people who are looking to do the same thing to overlook it because it is marked as unanswered.

    Thanks!
Back to Top