CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-dialog
Rahul Singh
Rahul Singh

Reputation: 21795

Customize jQuery dialog close button

I have many jQuery-ui dialogs in my application and I am trying to customize the close button of dialog, as in I am trying to remove some default classes, trying to remove the hover class (ui-state-hover) and also trying to remove the auto focus feature.

Currently, I have added the below code to achieve the same in open option of dialog function:-

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

Although, this was my last option after trying all day because it seems pretty ugly to me. I have also tried overwriting the default hover & focus classes in my custom CSS file like this:-

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

I have made sure that my custom CSS appears after jQuery-ui.css file but still no luck. Is there any better way to do this? I want to do this for all the dialogs in my application.

Upvotes: 0

Views: 1597

Answers (1)

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

to change hover and focus state CSS you will need to overwrite the entire rule as follows

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

Edited:

to refer how exactly css are getting applied please refer my answer in this post: How can I exclude one html view in whole project to be applied from CSS?

Upvotes: 1

Related Questions