Combo Style

[MBEN]

My combobox shows a background color and I am not able to figure out how to show a white background.
I also tried building a new style using the stylebuilder. It showed a white background when I was building it but wehn I used it in my website it came up with a gray background.

I want the combo to look like the first dropdown in the attached image (that is using an asp.net dropdownlist)

.RadComboBox_WebBlue
{
    color: #333;
    font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
    line-height: 16px;
}
.RadComboBox_WebBlue .rcbInputCell, .RadComboBox_WebBlue .rcbArrowCell
{
    background-image: url('ComboBox/radFormSprite.png');
    _background-image: url('ComboBox/radFormSpriteIE6.png');
}
.RadComboBox_WebBlue .rcbInputCellLeft
{
    background-position: 0 0;
}
.RadComboBox_WebBlue .rcbInputCellRight
{
    background-position: 100% 0;
}
.RadComboBox_WebBlue .rcbInput
{
    color: #333;
    font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
    line-height: 16px;
}
.RadComboBox_WebBlue .rcbEmptyMessage
{
    font-style: italic;
    color: #8a8a8a;
}
.RadComboBox_WebBlue .rcbArrowCellLeft
{
    background-position: 0 -176px;
}
.RadComboBox_WebBlue .rcbArrowCellRight
{
    background-position: -18px -176px;
}
.RadComboBox_WebBlue .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 0;
}
.RadComboBox_WebBlue .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% 0;
}
.RadComboBox_WebBlue .rcbHovered .rcbInputCellLeft
{
    background-position: 0 -22px;
}
.RadComboBox_WebBlue .rcbHovered .rcbInputCellRight
{
    background-position: 100% -22px;
}
.RadComboBox_WebBlue .rcbHovered .rcbInput
{
    color: black;
}
.RadComboBox_WebBlue .rcbHovered .rcbArrowCellLeft
{
    background-position: -36px -176px;
}
.RadComboBox_WebBlue .rcbHovered .rcbArrowCellRight
{
    background-position: -54px -176px;
}
.RadComboBox_WebBlue .rcbHovered .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -22px;
}
.RadComboBox_WebBlue .rcbHovered .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -22px;
}
.RadComboBox_WebBlue .rcbFocused .rcbInputCellLeft
{
    background-position: 0 -44px;
}
.RadComboBox_WebBlue .rcbFocused .rcbInputCellRight
{
    background-position: 100% -44px;
}
.RadComboBox_WebBlue .rcbFocused .rcbInput
{
    color: black;
}
.RadComboBox_WebBlue .rcbFocused .rcbArrowCellLeft
{
    background-position: -72px -176px;
}
.RadComboBox_WebBlue .rcbFocused .rcbArrowCellRight
{
    background-position: -90px -176px;
}
.RadComboBox_WebBlue .rcbFocused .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -44px;
}
.RadComboBox_WebBlue .rcbFocused .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -44px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbInputCellLeft
{
    background-position: 0 -66px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbInputCellRight
{
    background-position: 100% -66px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbInput
{
    color: #a5a5a5;
}
.RadComboBox_WebBlue .rcbDisabled .rcbArrowCellLeft
{
    background-position: -108px -176px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbArrowCellRight
{
    background-position: -126px -176px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -66px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -66px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbInputCellLeft
{
    background-position: 0 -88px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbInputCellRight
{
    background-position: 100% -88px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbInput
{
    color: #333;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellLeft
{
    background-position: -144px -176px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellRight
{
    background-position: -162px -176px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -88px;
}
.RadComboBox_WebBlue .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -88px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInputCellLeft
{
    background-position: 0 -110px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInputCellRight
{
    background-position: 100% -110px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbInput
{
    color: black;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellLeft
{
    background-position: -180px -176px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellRight
{
    background-position: -198px -176px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -110px;
}
.RadComboBox_WebBlue .rcbHovered .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -110px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellLeft
{
    background-position: 0 -132px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellRight
{
    background-position: 100% -132px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInput
{
    color: black;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellLeft
{
    background-position: -216px -176px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellRight
{
    background-position: -234px -176px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -132px;
}
.RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -132px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInputCellLeft
{
    background-position: 0 -154px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInputCellRight
{
    background-position: 100% -154px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbInput
{
    color: #a5a5a5;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellLeft
{
    background-position: -252px -176px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellRight
{
    background-position: -270px -176px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellLeft.rcbArrowCellHidden
{
    background-position: 0 -154px;
}
.RadComboBox_WebBlue .rcbDisabled .rcbReadOnly .rcbArrowCellRight.rcbArrowCellHidden
{
    background-position: 100% -154px;
}
.RadComboBoxDropDown_WebBlue
{
    border-color: #8a8a8a;
    color: #333;
    background: white;
    font: normal 12px "Segoe UI" ,Arial,Helvetica,sans-serif;
    line-height: 16px;
}
.RadComboBoxDropDown_WebBlue .rcbHeader, .RadComboBoxDropDown_WebBlue .rcbFooter
{
    color: #333;
    background-color: #eaeaea;
    background-image: url('Common/radFormSprite.png');
    _background-image: url('Common/radFormSpriteIE6.png');
    background-position: 0 -500px;
}
.RadComboBoxDropDown_WebBlue .rcbHeader
{
    border-bottom-color: #8a8a8a;
}
.RadComboBoxDropDown_WebBlue .rcbFooter
{
    border-top-color: #8a8a8a;
}
.RadComboBoxDropDown_WebBlue .rcbHovered
{
    color: black;
    background: #dfdfdf;
}
.RadComboBoxDropDown_WebBlue .rcbDisabled
{
    color: #a5a5a5;
    background-color: transparent;
}
.RadComboBoxDropDown_WebBlue .rcbLoading
{
    color: black;
    background: #dfdfdf;
}
.RadComboBoxDropDown_WebBlue .rcbItem em, .RadComboBoxDropDown_WebBlue .rcbHovered em
{
    color: black;
    background: #dfdfdf;
}
.RadComboBoxDropDown_WebBlue .rcbCheckAllItems
{
    color: #333;
    background-color: #eaeaea;
}
.RadComboBoxDropDown_WebBlue .rcbCheckAllItemsHovered
{
    color: #333;
    background-color: #eaeaea;
}
.RadComboBoxDropDown_WebBlue .rcbMoreResults
{
    border-top-color: #8a8a8a;
    color: #333;
    background-color: #eaeaea;
    background-position: 0 -500px;
    background-image: url('Common/radFormSprite.png');
    _background-image: url('Common/radFormSpriteIE6.png');
}
.RadComboBoxDropDown_WebBlue .rcbMoreResults a
{
    background-image: url('ComboBox/radFormSprite.png');
    _background-image: url('ComboBox/radFormSpriteIE6.png');
    background-position: -308px -181px;
}
.RadComboBoxDropDown_WebBlue .rcbSeparator
{
    color: #fff;
    background: #8a8a8a;
}

[Shinu]

Hi MBEN,

Please try the following CSS code snippet which works fine at my end.

CSS:

<style type="text/css">
    .RadComboBox_WebBlue .rcbFocused .rcbReadOnly .rcbInputCellLeft
    {
        border-radius: 1px !important;
        background-image: none !important;
        border: 1px solid black !important;
    }
</style>

Thanks,
Shinu.

[MBEN]

That did not work.
I had to do this to make it work:


.RadComboBox_WebBlue .rcbInputCell
{
    background-image: none !important;
    border: 1px solid #A4A4A4 !important;
}
 .RadComboBox_WebBlue .rcbArrowCell
{
    background-image: url('ComboBox/radFormSprite.png');
    _background-image: url('ComboBox/radFormSpriteIE6.png');
    border: 1px solid #8a8a8a !important;
}

However, my arrow cell looks a little disconnected from the combo. I am not sure how to fix that.
Attached image shows how it has a little soft padding around. I am trying to achieve the look in the dropdownlist above it that fits the arrow cell properly withing the boundaries.

[Shinu]

Hi MBEN,

Please add the following CSS along with your CSS which works fine at my end.

CSS:

.RadComboBox .rcbArrowCell a
{
    width: 17px !important;
    height : 17px !important;
}

Thanks,
Shinu.

[MBEN]

That works fine. Thanks!