Javascript 如何更改jQuery UI对话框的背景色？

我很难弄清楚如何更改

jqueryui对话框的背景色

我看过很多关于如何更改/删除标题栏的参考资料，但不包括整个背景，包括那些弯曲的角落。

以下是我的尝试：


问题是。ui小部件内容仅适用于对话框中的方形区域，但不包括曲线角

我发现了一个类.ui corner all类，希望它能给整个背景上色，但对话框只有一半是彩色的。（您可以在JSFIDLE中看到这一点）

以前有人这样做过吗？
你可以这样做


您应该设置为使用所有类背景！重要的

.ui对话框、.ui小部件、.ui小部件内容、.ui角点全部、.foo、.ui可拖动、.ui可调整大小{背景：黄色！重要
}​
 使用css类：


用户界面对话框

整件东西的主要容器

ui对话框标题

这就是标题实际出现的地方

ui对话框标题栏

对话框标题所在的区域（如果存在）

用户界面对话框内容

实际加载div的区域

ui可调整大小的句柄

这些div用于调整对话框的大小，但根据您的设置，它们通常是不可见的

ui对话框按钮平面

如果存在按钮，这里将显示按钮的位置

ui对话框按钮设置

这就是按钮实际出现的地方


另外，与所选答案不同，请注意，您不必使用
！重要信息

如果您想要直接通话，请设置所有内容并创建对话。在Chrome或FF（Chrome更易于阅读）中加载页面。然后只需打开对话框并选择要更改的图元。看看你的电脑里的CSS。您将能够看到jqueryui用于进行css调用的确切行。只需将该行复制到您自己的CSS中，并确保稍后加载该行，您的对话框将得到新的覆盖。
在CSS中使用此类

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}

请注意，您也可以在jQuery中使用此链接创建自己的自定义CSS


jQuery允许我们定制css。请从图库中选择您想要的主题并点击编辑按钮，您将能够更改对话框的几乎所有内容以及圆角

然后，您需要下载其中的整个jQuery包，您会发现css/自定义css文件夹就放在您的css标记中，并且它基本上会被排序

上面的方法也是正确的，因为您将能够更改它，但是您必须在CSS中查找类和类似的东西，jQuery以一种简单的方式为我们这样做，它也为我工作，所以您也可以尝试它

我基本上做的是创建两到三个自定义样式表，然后加载并使用它们，最后为网站选择一个样式表，并丢弃其余的样式表

我希望这有助于
 如果您想针对特定的对话框，可以通过以下方式进行：

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});

简短回答
您的_stylesheet.css

确保您的样式表包含在jQueryUI样式表之后，例如

您的_webpage.html

右键单击工具提示并选择“检查”。在“样式”选项卡中向下滚动，直到找到您关心的属性（
背景色
）


您可以单击该值并键入新值，以验证它是否具有所需的效果


要查看覆盖格式所需的格式，请单击右上角的filename:line#转到定义属性的.css文件（
jquery ui.css:802
）


格式将是

.ui-widget-content
{
    background: yellow;
}

您的
.css
文件需要使用相同的样式，并包含在此样式之后（请参见上面的“简短回答”）

人们有时会错误地添加
！重要提示
css后缀可以绕过此要求，但这会导致其他各种麻烦。
在.ui对话框中添加背景色，然后它就可以工作了。看，我必须在内联级别执行吗？如果在外部CSS中定义样式，则不会应用该样式。看看firebug，原生jquery对话框代码覆盖了外部cssOh不，我错了。我的css类选择器定义错误。“.foo.bar”应该是“.foo.bar”（空白）谢谢！我认为stackoverflow现在依赖于jsfiddle@Paul可能受其他css的影响不起作用。您可以使用Firebug或Chrome开发工具进行查看。FWIW，我发现这是为了保存标题：.ui dialog，.ui dialog，.ui widget content，.ui draggable，.ui resizeable“您应该使用use！important设置为所有类背景。”我不得不表示不同意。如果您想在悬停期间添加“highlightonhover”类型的类，该怎么办。背景永远不会改变。您不必使用
！重要信息
，您只需简单地创建一个直接引用，如

#myelementID.myClassContainer.ui小部件，即可获得相同的“覆盖”结果，而无需设置“永久性”更改。这对我有效，但我的对话框中有jqueryUI日期选择器。。它被涂上了相同的背景（除了数字，几乎消失了）。。我不知道如何绕过我的旧线程，但我只想感谢SpYk3HH的简单清单，使这个noob的生活更容易。谢谢@TimSPQR只是尽我所能提供帮助和回报，因为这个网站和其他几个网站帮助我远离了以前的DOS和PERL时代。这个解决方案在样式表或样式块上无法工作，因为只有ui对话框内容将驻留在定义的DIV块中#myelementID.ui-dialog-content将起作用，其他所有内容都会超出

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

$("#selector_for_item_with_tooltip").tooltip('open')

.ui-widget-content
{
    background: yellow;
}