如何设置 jQuery UI 对话框标题栏的文本颜色？答案

【问题标题】：How do I set the text color of jQuery UI dialog title bars?如何设置 jQuery UI 对话框标题栏的文本颜色？
【发布时间】：2010-12-15 05:27:32
【问题描述】：

我从另一个使用 jQuery UI 的开发人员那里继承了一个项目。

我添加了一些具有 jQuery UI 对话框和 jQuery UI 日期选择器的页面。

问题是，jQuery UI 对话框标题栏中的标题文本与标题栏的颜色相同。在 jQuery UI 日期选择器中，用户单击以更改日历上的月份的箭头也与那里的背景颜色相同！

我认为这是在 jQuery UI CSS 中设置的。有人可以告诉我我需要在 CSS 中的哪个位置进行调整以使文本可见吗？

我的 .ui-widget 部分如下所示，我在灰色背景上看到了灰色的小部件和文本：

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/;  background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;   color: #222222/*{fcHeader}*/;    font-weight: bold; }
.ui-widget-header a { color: #222222 /*{fcHeader}*/; }

更新：我已为以下答案获得积分。我发现小部件不可见的原因是我正在处理的程序副本中缺少 jQuery UI 图像文件！

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

我的看起来像这样

.ui-widget-header { border: 1px solid #aaaaaa; 
background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 
50% 50% repeat-x; color: #222222; font-weight: bold; }

我将color: #222222 更改为color: red，它只更改了对话框标题中的文本。

【讨论】：

我尝试将 ui-widget-header 中的 #222222 更改为红色。它将显示月份“十二月”的文本更改为红色，但更改为不同月份的按钮在灰色背景上仍然不可见。 :-/
有趣的是，如果我将 ui-widget-header 背景颜色更改为蓝色，小部件会变成蓝色背景上的不可见蓝色小部件，但是当我将鼠标悬停在它上面时，它会变成灰色！
那是因为按钮和悬停事件分配了不同的样式。
我刚刚意识到我缺少按钮样式的图像文件。我刚刚下载了它们，现在它可以工作了。谢谢！

【解决方案2】：

jQuery UI Theme Roller 可以帮助您推出自己的 jQuery 主题。如果以前的开发人员使用 jQuery，那么他很可能也使用主题滚轮来构建他的 CSS。我会搜索您的文件并查找名称类似于 jquery-ui-*.css 的文件，其中 * 代表版本号（例如 1.8.4）。

【讨论】：