I try to set a new arrow image in the combobox.
But I am not able to
Code below:
/*global*/
.RadComboBox_Wkb,
.RadComboBox_Wkb .rcbInput,
.RadComboBoxDropDown_Wkb
{
font-family: Calibri !important;
font-size: 14px !important;
color:rgb(255,71,71);
}
/* combobox */
div.RadComboBox_Wkb table
{
height: 16px !important;
line-height: 15px;
}
div.RadComboBox_Wkb table td.rcbInputCell
{
height: 16px !important;
line-height: 15px;
border: solid 1px rgb(71,71,71) !important;
background: rgb(255,255,255) !important;
}
* html div.RadComboBox_Wkb table td.rcbInputCell
{
height: 16px !important;
line-height /**/: 16px;
}
div.RadComboBox_Wkb table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }
div.RadComboBox_Wkb table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }
* html div.RadComboBox_Wkb .rcbInputCell .rcbInput
{
height: 16px !important;
padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */
}
.RadComboBox_Wkb .rcbInputCell .rcbEmptyMessage
{
color:rgb(71,71,71);
}
.RadComboBox_Wkb .rcbInputCell .rcbInput
{
font-family: Calibri !important;
font-size: 14px !important;
color:rgb(71,71,71);
height: 15px !important;
}
.RadComboBox_Wkb .rcbHovered .rcbInputCell .rcbInput
{
color:rgb(71,71,71);
height: 15px !important;
}
.RadComboBox_Wkb .rcbFocused .rcbReadOnly .rcbInputCell .rcbInput {
color:rgb(71,71,71);
height: 13px !important;
}
.RadComboBox_Wkb .rcbFocused .rcbInputCell .rcbInput
{
color:rgb(71,71,71);
height: 13px !important;
}
div.RadComboBox_Wkb table td.rcbArrowCell
{
border: solid 1px rgb(71,71,71) !important;
background: rgb(240,240,240) url("~/CustomStyles/images/icons/normal/rcbSprite.png") no-repeat -1px 50%;
}
div.RadComboBox_Wkb .rcbReadOnly .rcbArrowCellLeft,
div.RadComboBox_Wkb .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 0 1px 1px; }
div.RadComboBox_Wkb .rcbReadOnly .rcbArrowCellRight,
div.RadComboBox_Wkb .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 0; }
.RadComboBox_Wkb td.rcbArrowCell { background-position: -1px 50%; }
.RadComboBox_Wkb .rcbHovered .rcbArrowCell { background-position: -21px 50%; }
.RadComboBox_Wkb .rcbFocused .rcbArrowCell { background-position: -41px 50%; }
.RadComboBox_Wkb .rcbDisabled .rcbArrowCell { background-position: -61px 50%; }
.RadComboBox_Wkb .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; }
.RadComboBox_Wkb .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -22px 50%; }
.RadComboBox_Wkb .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -42px 50%; }
.RadComboBox_Wkb .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -62px 50%; }
.RadComboBox_Wkb td.rcbArrowCellHidden,
.RadComboBox_Wkb .rcbHovered td.rcbArrowCellHidden,
.RadComboBox_Wkb .rcbFocused td.rcbArrowCellHidden,
.RadComboBox_Wkb .rcbReadOnly td.rcbArrowCellHidden,
.RadComboBox_Wkb .rcbHovered .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Wkb .rcbFocused .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Wkb .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_Wkb table.rcbDisabled td.rcbArrowCellHidden { background: none; }
.RadComboBox_Wkb .rcbHovered .rcbArrowCell,
.RadComboBox_Wkb .rcbHovered .rcbReadOnly .rcbInputCell,
.RadComboBox_Wkb .rcbHovered .rcbReadOnly .rcbArrowCellHidden
{
}
.RadComboBox_Wkb .rcbFocused .rcbArrowCell,
.RadComboBox_Wkb .rcbFocused .rcbReadOnly .rcbInputCell,
.RadComboBox_Wkb .rcbFocused .rcbReadOnly .rcbArrowCellHidden
{
border: solid 2px rgb(86,152,197) !important;
}
div.RadComboBox_Wkb .rcbHovered .rcbArrowCell,
div.RadComboBox_Wkb .rcbHovered .rcbInputCell
{
font-family: Calibri !important;
font-size: 14px !important;
color:rgb(71,71,71);
height: 15px !important;
border-color: #F739BB;
}
div.RadComboBox_Wkb .rcbFocused .rcbArrowCell,
div.RadComboBox_Wkb .rcbFocused .rcbInputCell
{
font-family: Calibri !important;
font-size: 14px !important;
color:rgb(71,71,71);
height: 13px !important;
border-color: #F739BB;
}
div.RadComboBox_Wkb .rcbDisabled .rcbArrowCell,
div.RadComboBox_Wkb .rcbDisabled .rcbInputCell
{
border-color: rgb(171,171,171);
font-family: Calibri !important;
font-size: 14px !important;
color: rgb(171,171,171);
}
div.RadComboBox_Wkb .rcbArrowCell a
{
height: 16px !important;
}
div.RadComboBox_Wkb td.rcbArrowCellHidden,
div.RadComboBox_Wkb .rcbArrowCellHidden a
{
width: 1px;
}
div.RadComboBox_Wkb td.rcbArrowCellHidden.rcbArrowCellRight
{
border-left: 0;
}
/* dropdown */
.RadComboBoxDropDown_Wkb
{
border-color: rgb(86,152,197) !important;
border-style: solid !important;
border-width: 2px !important;
background-color: #ffffff;
}
.RadComboBoxDropDown_Wkb .rcbHeader,
.RadComboBoxDropDown_Wkb .rcbFooter
{
padding-top: 2px;
padding-bottom: 2px;
color: #FF0000;
background-color: #F739BB;
}
.RadComboBoxDropDown_Wkb .rcbHeader
{
border-bottom-color: rgb(86,152,197) !important;
}
.RadComboBoxDropDown_Wkb .rcbFooter
{
border-top-color: rgb(86,152,197) !important;
}
html .RadComboBoxDropDown_Wkb .rcbHeader,
html .RadComboBoxDropDown_Wkb .rcbFooter
{
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
border: 0;
}
.RadComboBoxDropDown_Wkb .rcbItem em
{
background: rgb(86,152,197) !important;
color: rgb(255,255,255) !important;
}
div.RadComboBoxDropDown_Wkb .rcbHovered
{
padding: 1px 5px;
border: 1px solid rgb(86,152,197) !important;
color: #ffffff;
background-color: rgb(86,152,197) !important;
}
.RadComboBoxDropDown_Wkb .rcbSeparator
{
color: rgb(255,0,0) !important;
background-color: rgb(200,100,200) !important;
}
.RadComboBox_Wkb .rcbDisabled .rcbInputCell .rcbInput,
.RadComboBoxDropDown_Wkb .rcbDisabled
{
border-color: rgb(171,171,171);
font-family: Calibri !important;
font-size: 14px !important;
color: rgb(171,171,171);
}
.RadComboBoxDropDown_Wkb .rcbLoading
{
}
.RadComboBoxDropDown_Wkb .rcbMoreResults
{
border-top-color: rgb(86,152,197) !important;
background: rgb(86,152,197) !important;
color: rgb(255,255,255) !important;
}
.RadComboBoxDropDown_Wkb .rcbMoreResults a
{
background: url("~/CustomStyles/images/icons/normal/rcbSprite.png") no-repeat -41px -3px;
}
div.RadComboBox_Wkb .rcbDisabled .rcbInputCell {
background: rgb(230,230,230) !important;
font-family: Calibri !important;
font-size: 14px !important;
color: rgb(171,171,171);
}
div.RadComboBox_Wkb .rcbDisabled .rcbArrowCell {
background-image: url("~/CustomStyles/images/icons/normal/arrow.png");
background-repeat: repeat-x;
}
2 Answers, 1 is accepted
Rank 2
I do not personally know of a way to change the 'arrow down' icon in the RadComboBox, but there are numerous different skins available for the combobox's appearance. Take a look at the documentation here. Hopefully one of these options can help you personalize your RadComboBox.
If you would like to get very technical about exactly what the box will look like, look at this demo to learn how to edit the RadComboBox's sprite image, allowing you to change the arrow at the source.
Good luck,
Master Chief
Rank 1
The down arrow is in a span with class k-select. Give the enclosing div an id, then use css as below. works fine for me. Solution is non-global, since many controls use this structure.
<div id="kendoSpanYellow" class="input-group">
@(Html.Kendo().ComboBox()
.Name("searchCombo")
etc.
Then in css:
#kendoSpanYellow span.k-select {
background-color: yellow;
}
Cheers!