如何使jquery小部件呈现文本而不是图标

Question

事先为这个含糊不清的问题道歉。

目前，我正在将一个jQuery UI数据报警器连接到一个我正在开发的站点上，并且在很大程度上，我已经成功地将它设计成了我想要使用的样式。

然而，这个小部件使用预先打包的图标来为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

我只需通过禁用background-image来删除类..ui datepicker-next和..ui datepicker-prev之后的图标，然后使用伪选择器：内容放置字符：“您的文本在这里”。

我用这个使用日期选择器(单击输入字段)为您演示了这一点

​

​

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