如何指定(覆盖)JQuery 图标颜色 [英] How To Specify (Override) JQuery Icon Color

问题描述

我一直在我的网络应用程序中很好地使用 jQuery 图标，但我已经到了想要使用默认情况下无法实现的颜色的地步.我目前正在使用主要使用绿色的State Street"主题.但是我有一个带有白色文本的红色框，并且想使用一个白色的图标.有与主题一起提供的白色图标，但它们仅在图标位于具有ui-state-focus"类的 div(或其他容器)中时才会应用.这将使图标变为白色，但会将背景颜色更改为绿色，我希望将其保留为红色.

有什么方法(最有可能通过 CSS)来覆盖 jQuery 用于图标的背景图像，以便我可以使用不同的颜色?

谢谢.

澄清:我想发布我目前正在使用的 html 对我有帮助:

<!-- 这个 b/c 没有为 errorMessage div 提供的 jquery ui 类(如 ui-state-focus)--><div id="errorMessage"><span class="ui-icon ui-icon-alert" style="float: left"></span>一次只能添加 1 个活动

我也有 CSS:

.dialog #errorMessage{/*显示:无；*/背景颜色:#CC3300；颜色:#FFFFFF；字体粗细:粗体；填充顶部:3px；填充底部:3px；垂直对齐:底部；底部:自动；字体大小:.80em；宽度:100%}

"display: none" 目前已被注释掉，所以我可以看到它.我确实将它设置为在错误捕获时淡入淡出.再次感谢您的帮助.

解决方案

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

.ui-icon{背景图片:网址(icons.png)；}

您可以下载任何您喜欢的颜色的图标 png 文件.只需更改以下网址中的颜色部分:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

例如，如果您想要红色图标和矢车菊蓝色图标，您需要的网址是:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.pnghttp://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

等

(但不要将 URL 用作 CDN，最好将文件保存在本地)

I've been making good use of the jQuery icons in my web app, but have come to a point where I would like to use a color that I'm not able to achieve by default. I'm currently using the "State Street" theme, which primarily uses green. But I have a red box with white text, and would like to use an icon that is white as well. There are white icons that are supplied with the theme, but they only get applied when the icons are inside a div (or some other container) that has a class of "ui-state-focus". This will make the icon white, but will change the background color to green, which I want to leave as red.

Is there any way (most likely via CSS) to override what background image jQuery uses for the icons, so that I can use a different color?

Thanks.

CLARIFICATION: I guess it would help for me to post the html I'm currently working with:

<!-- 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>

I also have 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" is currently commented out so I can see it. I do have it set up to fadeIn on error catch. Thanks again for the help.

解决方案

You can overwrite the icons with the following CSS:

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

You can download the icon png file in any color you like. Just change the color part in the following url:

http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png

For example, if you want Red icons, and Cornflower Blue icons, the URLs you need are:

http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png
http://download.jqueryui.com/themeroller/images/ui-icons_6495ED_256x240.png

etc.

(but don't use the URL as a CDN, be nice and save the files locally)

这篇关于如何指定(覆盖)JQuery 图标颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！