Question

我已将Kendo网格上的字体大小更改为11，这样，日期选择器文本框上的日历图标会在底部被截断。当您使用以下代码将鼠标悬停在上面时，我能够使用margin-top移动图标，但是我无法弄清楚如何将其移动到正常状态。

    .k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar{
background-position:-48px -176px; margin-top: -6px;
}

参见示例：http://jsbin.com/ufimom/592/edit

Answer 1

试试这个，

.k-i-calendar {
    background-position: -32px -176px;
    margin-top: -6px !important;
}

演示：http://jsbin.com/ufimom/596/edit

Answer 2

在上下文中没有看到你的html和背景图片，我只是在猜测。尝试将日历图标的正常状态添加到您的css规则中，如下所示，

.k-link:not(.k-state-disabled):hover>.k-i-calendar,.k-state-hover .k-i-calendar,.k-button:hover .k-i-calendar,.k-textbox:hover .k-i-calendar,.k-button:active .k-i-calendar, .k-i-calendar { background-position:-48px -176px; margin-top: -6px; }

DEMO

编辑：正如上一张海报所提到的，！重要可能是此处的最佳解决方案，以便覆盖剑道设置。示例：

.k-i-calendar {
 margin-top: 0px !important;
}

DEMO：http://jsbin.com/ufimom/598/

Answer 3

我有一个高度个性化的剑道东西。自定义样式是剑道最大的问题之一（一旦你开始大规模使用剑道，你会发现其他数百万个问题）。为了最小化样式表的大小，他们将许多不同控件的样式组合成了几个文件。虽然它是一件好事，但它使自定义样式（然后在将来更新）成为一场噩梦。了解如何在css中使用“：not”，“＆gt;”，“：first”，“：first-of-type”等工作将真正帮助您设置网格和其他控件的样式。

我通常会编写单独的样式表来覆盖剑道样式（在我的覆盖css中使用了很多！important关键字）。当我更新kendo时它会有所帮助。

Kendo CSS图标位置

3 个答案: