Having trouble fixing the color of ui-icon-close, the close icon "X"? I've been referring to this page How To Specify (Override) JQuery Icon Color for help on changing the color of ".ui-close-icon" but it hasn't worked. Any suggestions on how to solve this?
Check out my JS fiddle.
https://jsfiddle.net/kimihiro/hqxmmj8q/show/ https://i.sstatic.net/UcxH5.jpg
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title) {
title.html(" ");
} 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");
});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;
}
... (remaining code continues)
<script type="text/javascript" src="jsapi/utils.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
... (remaining code continues)