web-dev-qa-db-ja.com

JQueryアイコンの色を指定（オーバーライド）する方法

私は自分のWebアプリでjQueryアイコンをうまく利用していますが、デフォルトでは達成できない色を使いたいと思うようになりました。現在、主に緑を使用する「State Street」テーマを使用しています。しかし、白いテキストが付いた赤いボックスがあり、白いアイコンも使用したいと思います。テーマに付属する白いアイコンがありますが、アイコンが「ui-state-focus」のクラスを持つdiv（または他のコンテナ）内にある場合にのみ適用されます。これにより、アイコンが白になりますが、背景色が緑に変わり、赤のままにしておきます。

別の色を使用できるように、jQueryがアイコンに使用する背景画像をオーバーライドする方法（CSSを使用する場合が多い）はありますか？

ありがとう。

説明：現在作業中の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」は現在コメントアウトされているため、確認できます。エラーをキャッチするとfadeInに設定します。助けてくれてありがとう。

jquerycssjquery-uiicons
61
MegaMatt

次のCSSでアイコンを上書きできます。

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

アイコンpngファイルは好きな色でダウンロードできます。次のURLの色部分を変更するだけです。

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

たとえば、赤いアイコンとコーンフラワーの青いアイコンが必要な場合、必要なURLは次のとおりです。

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

RedCornflower Blue

等.

（ただし、URLをCDNとして使用しないでください。ナイスになり、ファイルをローカルに保存してください）

88
matt burns

SELF-ANSWER：背景画像のURLを白のアイコンを使用するファイルに指定しました。そこで、CSSファイルに数行追加しました。

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

これは基本的に、デフォルトのjQuery cssファイルがアイコンに使用する背景画像を上書きし、希望する色を実現します。もちろん、白いアイコン.pngファイルがテーマに含まれていたため、これは機能していました。紫色のようなクレイジーな色が必要な場合は、独自のアイコンを作成する必要があります。ソースの2つの異なる場所にあるため、jQuery CSSファイルで指定されているURLと比較して、自分のCSSファイルのURLを長くする必要があることに注意してください。

22
MegaMatt

アイコンの色に組み込みのアイコンジェネレーターを使用する＃00a300＃ダークグリーン

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

おそらく最も簡単な方法は、jQueryがアイコンに使用しているイメージファイルを正確に見つけて、そのイメージファイルを変更（または独自に作成）して、適切な場所にドロップすることです。

0
singingwolfboy

buttons：[text：//これを使用しないでください
html： 'No'、 "class"： 'bg-secondary text-white p-2 border-0'、
click：function（）{
$（this）.dialog（ "close"）;

0
jhombalz