This is a migrated thread and some comments may be shown as answers.

Can not change Arrow image

2 Answers 143 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Hans
Top achievements
Rank 1
Hans asked on 22 Feb 2013, 02:09 PM
Hello

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

Sort by
0
MasterChiefMasterChef
Top achievements
Rank 2
answered on 22 Feb 2013, 05:09 PM
Hi Hans,

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
0
William
Top achievements
Rank 1
answered on 01 Feb 2016, 09:06 PM

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!

Tags
ComboBox
Asked by
Hans
Top achievements
Rank 1
Answers by
MasterChiefMasterChef
Top achievements
Rank 2
William
Top achievements
Rank 1
Share this question
or