自定義jQuery對話框關閉按鈕

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

雖然，這是一整天努力，因爲它似乎很醜陋，我後，我的最後一個選項。我自己也嘗試在這樣我的自定義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?