Can not change Arrow image

3 posts, 0 answers
  1. Hans
    Hans avatar
    1 posts
    Member since:
    Feb 2013

    Posted 22 Feb 2013 Link to this post

    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. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 22 Feb 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. William
    William avatar
    1 posts
    Member since:
    May 2011

    Posted 01 Feb in reply to MasterChiefMasterChef Link to this post

    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!

Back to Top