Replacing the Arrow Image in the ComboBox

[Brian]

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

[Brian]

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

[Brian]

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!