0

我已将我的 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

4

3 回答 3

4

尝试这个，

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

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

于 2013-09-23T12:52:21.140 回答
0

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

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

于 2013-09-23T10:45:33.750 回答
0

如果没有在上下文中看到您的 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; }

演示

编辑：正如之前的海报所提到的， !important 可能是这里最好的解决方案，以覆盖 Kendo 设置。例子：

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

演示在这里：http: //jsbin.com/ufimom/598/

于 2013-09-23T09:03:14.650 回答