change the button background color in IE 8

[David]

Hi Guys,

I manage to change the background color button in IE 7 by adding  

background-color: #3399FF; in kendo.common.min.css but unfortunately not working in IE 8 or above


* + html .k-button {
    line-height: normal;
  
}

[Dimo]

Hello David,

* + html  .......  is a selector, which works only in iE7 and is used for standard-compliant CSS hacks.

In addition, please note that IE10 and all other modern browsers now apply linear gradients instead of background colors, so you may need to edit / override those as well.

Greetings,
Dimo
the Telerik team

[David]

Hi Dimo,

Thank you for your response. Would you be able to point out which area i need to change. Please advise

Thank you

[Dimo]

Hello David,

The button background is determined by the following styles, which are located in the theme CSS, not in the common CSS. You can either modify them, or override them in another CSS file.

The code below was taken from the Default theme's CSS file.

.k-header,
.k-grid-header,
.k-toolbar,
.k-dropdown-wrap,
.k-picker-wrap,
.k-grouping-header,
.k-pager-wrap,
.k-textbox,
.k-button,
.k-draghandle,
.k-tile,
.k-autocomplete,
.k-state-highlight,
.k-tabstrip-items .k-item
{
    background-image:url('textures/highlight.png');
    background-image:none,-webkit-linear-gradient(top,#f6f6f6 0,#eaeaea 100%);
    background-image:none,-moz-linear-gradient(top,#f6f6f6 0,#eaeaea 100%);
    background-image:none,-o-linear-gradient(top,#f6f6f6 0,#eaeaea 100%);
    background-image:none,linear-gradient(to bottom,#f6f6f6 0,#eaeaea 100%);
}


.k-button,
.k-button.k-state-disabled:hover,
.k-state-disabled .k-button:hover,
.k-button.k-state-disabled:active,
.k-state-disabled .k-button:active
{
    border-color:#c5c5c5;
    background-color:#e3e3e3;
}

.k-button:hover
{
    color:#2e2e2e;
    border-color:#a99f9a;
    background-color:#a99f9a;
}

Greetings,
Dimo
the Telerik team