如何获取jquery小部件来呈现文本而不是图标

Question

提前道歉，这将是一个模糊的问题。

我正在联系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？

Answer 1

我只需删除 .ui-datepicker-next和.ui-datepicker-prev 后面的图标，方法是禁用 background-image ，然后使用pseudoselector ：在之后放置一个带有内容的字符：“你的文字在这里”。

我使用 jsfiddle with date picker (click on the input field)

为您演示了这一点

Css-Code：

.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: "<";
}