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

使用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对话框标题栏close

中的样式将其删除，但图标周围最初会出现一个边框

这里有一个活生生的例子

---

有没有关于如何解决这两个问题的想法？

我将把重点放在jQuery ui中的

.ui图标类上。一点检查表明，他们使用了一个和背景定位加载不同的图标

像这样：

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

Fiddle：
此代码不允许我加载自定义图像，它只是加载与默认精灵不同的图像。它是！重要的是我失踪了。谢谢