JQuery UI 对话框 - 失去焦点时自定义关闭按钮消失

Question

使用 jQuery UI，我使用以下 CSS 创建了一个带有自定义关闭图标的对话框：

/* changing dialog close button */
.ui-dialog-titlebar-close
{
    border: none !important;
    background-image: url('images/icon-close-16.png');
    background-repeat:no-repeat;
}

/* changing dialog close button */
.ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:focus 
{
    background-color: transparent !important;
    border: none !important;
    background-image: url('images/icon-close-16.png');
    background-repeat:no-repeat;
}

/* hide the default "x" close image */
.ui-dialog-titlebar-close span 
{  display:none !important;  }

但是，有两种不良影响正在发生。

最重要的是，如果我单击对话框中的文本，我用于关闭图标的图像就会消失。 （但是，当鼠标悬停在该位置上时，它确实会重新出现。）

其次，尽管我尝试通过.ui-dialog-titlebar-close 中的样式删除它，但图标周围最初会出现一个边框。

http://home.adelphi.edu/~stemkoski/JQuery-testing.html 有一个活生生的例子。

关于如何解决这些问题的任何想法？

Answer 1

我会专注于 jQuery UI 中的 .ui-icon-closethick 类。一点检查表明他们使用CSS sprite image 和背景定位来加载不同的图标。

像这样：

.ui-icon-closethick {
  background-image: url('http://home.adelphi.edu/~stemkoski/images/icon-close-16.png') !important;
  background-repeat: no-repeat;
  background-position: center center;
}

小提琴：http://jsfiddle.net/hamstu/w42Yw/1/