Datepicker input height

[Kent]

I want to reduce the input height of Datepicker and already done that by following the link below. But in Chrome, it has a grey shadow under the input and calendar icon.  How to adjust css to avoid that? Thanks.

http://www.telerik.com/forums/reduce-height-of-calender-image-in-datepicker

k-i-calendar {
    width: 10px;
    height: 10px;
    background: red;
    margin: 0 3px;
}
.k-picker-wrap .k-input {
    height: 1.4em;
    line-height: 1.4em;
}
.k-picker-wrap .k-select {
    min-height: 1.29em;
    line-height: 1.29em;
    padding-top: 2px;
}

 

[Dimiter Topalov]

Hello Kent,

You can further tweak the appearance of the Kendo UI DatePicker in accordance with your preference via overwriting our built-in CSS rules, e.g.:

http://dojo.telerik.com/AHile

The most straight-forward approach would be to inspect the DOM elements in the browser's developer tools (F12), see what rules are applied to the respective CSS selectors, and overwrite the styles.

Regards,
Dimiter Topalov
Telerik by Progress

[Kent]

Thanks for the dojo example.  Super useful.