title: Ui-modal-dialog ui-icon-close color change
body: <p>
  I am fixing the color of ui-icon-close, which is a close icon "X". Currently, I have mostly seen the following page <a href="https://stackoverflow.com/questions/1821568/how-to-specify-override-jquery-icon-color">How To Specify (Override) JQuery Icon Color</a> for helping me to change the color of".ui-close-icon" which is "X"'s icon color. But it does not work so far. How can I fix?</p>
  
  <p>My JS fiddle.</p>
  
  <p><a href="https://jsfiddle.net/kimihiro/hqxmmj8q/show/" rel="nofollow noreferrer">https://jsfiddle.net/kimihiro/hqxmmj8q/show/</a>
  <a href="https://i.stack.imgur.com/UcxH5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UcxH5.jpg" alt="enter image description here"></a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
      if (!this.options.title) {
        title.html("&amp;#160;");
      } else {
        title.html(this.options.title);
      }
    }
  }));
  $("#dialog").dialog({
    autoOpen: false,
    　　height: 300,
    width: 830,
    dialogClass: 'myTitleClass',
    modal: true,
  
    title: "Carpe Diem. Nunca Acredito Posteiro",
    closeOnEscape: false,
    open: function(event, ui) {
      $('.ui-dialog-titlebar-close', ui.dialog | ui);
    },
    buttons: {
      "Save": function() {
        $(this).trigger(updateKeyword());
      }
    }
  })
  
  $("#opener").click(function() {
    $("#dialog").dialog("open");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input#opener {
     height: 30px;
     width: 200px;
     left: 50%;
     margin-top: -15px;
     /* = -height / 2   */
     margin-left: -100px;
     /* = -width / 2    */
     position: fixed;
     top: 80%;
     background: rgba(4, 115, 184, 0.9);
     color: #fff;
     font-style: Arial;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.5;
     border-style: outset;
     display: flex;
     transition: .5s ease;
     vertical-align: middle;
     justify-content: center;
   }
   
   .myTitleClass .ui-dialog-title {
     white-space: normal;
   }
   
   .myTitleClass .ui-dialog-titlebar {
     background: rgba(4, 115, 184, 0.9);
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     height: 60px;
   }
   
   .myTitleClass .ui-widget-content .ui-state-default {
     background-image: none;
     background-color: rgba(4, 115, 184, 0.6);
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     border-style: none;
   }
   
   .myTitleClass .ui-widget-content .ui-state-hover {
     background-image: none;
     background-color: rgb(4, 127, 184);
     color: #fff;
     font-size: 16px;
     font-weight: 700;
     border-style: none;
   }
   
   .ui-widget-overlay {
     position: fixed;
     background: black;
   }
   
   .myTitleClass .ui-dialog-titlebar-close {
     background: rgba(4, 115, 184, 0.9);
     border-radius: 17px;
     height: 33px;
     margin: -10px 0 0;
     padding: 1px;
     position: absolute;
     right: -28px;
     top: -24%;
     width: 33px;
   }
   
   .myTitleClass.ui-icon-close {
     background-image: url("images/ui-icons_ffffff_256x240.png");
   }
   
   .ui-dialog {
     overflow: visible;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="jsapi/utils.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/script.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;input type="button" id="opener" value="Register Keyword"&gt;
  &lt;/button&gt;
  &lt;div id="dialog"&gt;Merry Christmas.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>