1

对于将是一个模糊的问题提前道歉。

我目前正在将一个jQuery UI Datepicker连接到我正在开发的网站上，并且在大多数情况下，我成功地使用了 CSS 对其进行了样式设置。

但是，该小部件使用预先打包的图标Previous和Next按钮在月份之间移动（参见上面的链接）。

我想用克拉代替这些图标。

鉴于附加到 jQuery UI 库的 CSS 是样式和放置图标：

/* states and images */
.ui-icon {
    width: 16px;
    height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png);
}
.ui-state-default .ui-icon {
    background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-state-active .ui-icon {
    background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-state-highlight .ui-icon {
    background-image: url(images/ui-icons_228ef1_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url(images/ui-icons_ffd27a_256x240.png);
}

有没有一种简单的方法可以使用 CSS 将纯文本克拉代替 CSS 中background-image设置的 s？

4

1 回答 1

3

我只需通过禁用背景图像来删除类.ui-datepicker-next 和 .ui-datepicker-prev之后的图标，然后使用 pseudoselector : after放置一个带有content:"your text here"的字符。

我用这个带有日期选择器的 jsfiddle为你演示了这个（点击输入字段）

在此处输入图像描述

CSS代码：

.ui-datepicker-next .ui-icon-circle-triangle-e, .ui-datepicker-prev .ui-icon-circle-triangle-w {
    background-image: none;
    content:"k";
 position:absolute;
}
.ui-datepicker-next, .ui-datepicker-prev {
      position:relative;  
}

.ui-datepicker-next:after {
    z-index:10000;
    color:black;
    position:absolute;
    left:9px;
    top:4px;
    content: ">";
}
.ui-datepicker-prev:after {
    z-index:10000;
    color:black;
    position:absolute;
    left:9px;
    top:4px;
    content: "<";
}
于 2013-10-17T09:50:42.957 回答