Как задать (переопределить) цвет значка JQuery

Я хорошо использовал значки jQuery в своем веб-приложении, но пришел к тому, что хотел бы использовать цвет, который по умолчанию мне не удается достичь. В настоящее время я использую тему "State Street", которая в основном использует зеленый цвет. Но у меня есть красная коробка с белым текстом, и я хочу использовать икону, которая тоже белая. Есть белые значки, которые поставляются с темой, но они применяются только тогда, когда значки находятся внутри div (или другого контейнера), который имеет класс "ui-state-focus". Это сделает значок белым, но изменит цвет фона на зеленый, который я хочу оставить красным.

Есть ли способ (скорее всего, через CSS) переопределить, какое фоновое изображение jQuery использует для значков, чтобы я мог использовать другой цвет?

Спасибо.

CLARIFICATION: Я думаю, это помогло бы мне опубликовать 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 при сбое ошибок. Еще раз спасибо за помощь.

Ответы

Ответ 1

Вы можете перезаписать значки со следующим CSS:

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

Вы можете загрузить файл png значка любого цвета. Просто измените цветную часть в следующем URL:

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

Например, если вы хотите красные значки и значки Cornflower Blue, требуемые 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, будьте красивы и сохраняйте файлы локально)

Ответ 2

SELF-ANSWER: Указывает URL-адрес фонового изображения как файл, который использует белые значки. Поэтому я добавил несколько строк в мой файл CSS:

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

Это существенно переопределяет фоновое изображение, которое файл jQuery по умолчанию для jQuery хочет использовать для значка, и достиг нужного цвета. Конечно, это работало только потому, что в эту тему был включен белый значок .png файла. Если бы я хотел какой-то сумасшедший цвет, как фиолетовый, мне бы понадобилось создать свою собственную иконку. Обратите внимание, что мне нужно было удлинить URL-адрес в моем собственном файле CSS по сравнению с URL-адресом, указанным в файле CSS jQuery, потому что они расположены в двух разных местах моего источника.

Ответ 3

Использовать встроенный генератор значков для цвета значка # 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;
}

Ответ 4

Вероятно, самый простой способ сделать это - выяснить, какой именно файл jQuery для изображений используется для значков, а затем изменить этот файл изображения (или создать свой собственный) и отбросить его на место.

Ответ 5

кнопки: [text://не используйте это
html: "Нет", "класс": "bg-вторичный текст-белый p-2 border-0",
click: function() {
$ (Это).dialog( "закрыть");
}]

Ответ 6

Для локально сохраненного файла css в этом случае цвет красный:

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