Question

我的应用程序中有很多jQuery-ui对话框，我正在尝试自定义对话框的关闭按钮，因为我试图删除一些默认类，尝试删除悬停类（ui-state-hover）和还尝试删除自动对焦功能。

目前，我已添加以下代码以在open对话框功能选项中实现相同的目标： -

$('button[title="close"].ui-dialog-titlebar-close')
    .removeClass("ui-button-icon-only ui-state-default ui-button ui-widget")
    .hover(function () { $(this).removeClass("ui-state-hover"); })
    .blur()
    .css({ "border": "none" });

虽然这是我整天尝试后的最后一个选择，因为它对我来说似乎很难看。我也试过覆盖默认的悬停＆amp;我的自定义CSS文件中的焦点类如下： -

.ui-state-hover { background: none!important; border:none!important;}
.ui-state-focus { outline-color: transparent !important; }

我确保我的自定义CSS出现在jQuery-ui.css文件之后，但仍然没有运气。有没有更好的方法来做到这一点？我想为我的应用程序中的所有对话框执行此操作。

Answer 1

要更改悬停和焦点状态CSS，您需要覆盖整个规则，如下所示

CSS

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  background: none!important; 
  border:none!important;
  outline:none!important;
}

<强>编辑：

要参考如何正确应用css，请参阅我在这篇文章中的回答：How can I exclude one html view in whole project to be applied from CSS?

自定义jQuery对话框关闭按钮

1 个答案: