Цвет фона кнопки для jQuery

вот мой код jQuery mobile button

<a href="#" data-role="button" style="color:green; background-color:red";>
  Search
</a>

Я хочу изменить цвет фона кнопки, я попробовал встроенный стиль, но он не работает, однако цвет текста изменяется нормально.

спасибо

Ответ 1

Просто используйте "background:" вместо "background-color:"

<a href="[url]" data-role="button" style="background: green; color: white;">Search</a>

Протестировано и работает как шарм.

Ответ 2

jQuery Mobile инициализирует виджеты и добавляет структуру HTML, когда вы делаете ссылку на кнопку. Вы можете использовать эту структуру для отображения виджетов кнопок и их элементов-потомков для изменения стилей, которые мы хотим изменить:

HTML -

<a class="my-btn" data-role="button" href="#">
    Search
</a>

CSS -

.ui-page .ui-content .ui-btn.my-btn .ui-btn-inner {
    color      : green;
    background : red;
}

Это указывает на элемент .ui-btn-inner, который является потомком элемента a.ui-btn (ваша исходная ссылка, к которой я добавил класс my-btn), которая находится на псевдостранице jQuery Mobile и устанавливает ее background и текст color.

Вот демо: http://jsfiddle.net/WZ9pf/

Цвет текста работал раньше, потому что он наследуется элементами-потомками, поэтому, если вы установите текст color на элемент body, например, все элементы получат этот текст color, если вы не укажите еще один ниже по дереву.

Итак, вы можете видеть, что делает jQuery Mobile для ссылки, которая превращается в кнопку, вот что включает в себя следующий HTML-код:

<a href="#" data-role="button" class="my-btn ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-c ui-btn-up-c" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">
            Search
        </span>
    </span>
</a>

Также, если вы хотите легко создавать градиенты, вот отличный инструмент: http://www.colorzilla.com/gradient-editor/ p >

Вот красный, который я вытащил из предварительно сделанных градиентов: http://jsfiddle.net/WZ9pf/1/

Ответ 3

Вот образец "красной" кнопки.

Просто добавьте тег data-theme = "f" в свой тег кнопки, а затем это может быть рекомендуемый метод, при котором вы можете создавать свои собственные кнопки для темы

.ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f {
  color: white;
  font-weight: bold;
  text-decoration: none; }

.ui-btn-up-f {
  border: 1px solid #711414;
  background: #ab2525;
  text-shadow: 0 -1px 1px #711414;
  background-image: -moz-linear-gradient(top, #c44f4f, #ab2525);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c45e5e), color-stop(1, #9e3939));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c44f4f', EndColorStr='#ab2525')"; }

.ui-btn-hover-f {
  border: 1px solid #6e0000;
  background: #b54a4a;
  text-shadow: 0 -1px 1px #690101;
  background-image: -moz-linear-gradient(top, #d47272, #b54a4a);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d47272), color-stop(1, #b54a4a));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d47272', EndColorStr='#b54a4a')"; }

.ui-btn-down-f {
  border: 1px solid #782323;
  background: #c44f4f;
  text-shadow: 0 -1px 1px #782323;
  background-image: -moz-linear-gradient(top, #9e3939, #c44f4f);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9e3939), color-stop(1, #c44f4f));
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9e3939', EndColorStr='#c44f4f')"; }

Ссылка на код из https://gist.github.com/1057852

Ответ 4

Стили мобильных стилей JQuery применяются с использованием тем. Когда ссылка добавляется в контейнер, ей автоматически назначается буква образца образца, соответствующая ее родительской панели или содержимому, чтобы визуально интегрировать кнопку в родительский контейнер, например хамелеон.

Таким образом, кнопка, помещенная внутри контейнера содержимого с темой "a" (черный в теме по умолчанию), автоматически назначается темой кнопки "a" (древесный уголь в теме по умолчанию).

Здесь вы можете просмотреть существующие темы. http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html

Если вы хотите создать свой собственный, вы можете использовать тематический ролик: http://jquerymobile.com/themeroller/

Источник: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html

Ответ 5

Если кнопка определена как:

<button type="button" id="yourbutton">Hello</button>

Затем код для установки фона:

$('#yourbutton').parent().find('.ui-btn-inner').css("background-color",highcolor);

Ответ 6

вам нужно переопределить не только цвет фона, но и градиент фонового изображения для цвета, который вы хотите, он идеально подходит для меня.

.ui-btn {
    background: #00BCD4;
    background-image: -moz-linear-gradient(top, #00BCD4, #00BCD4);
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #00BCD4), color-         stop(1, #00BCD4));
   color:#FFFFFF;
   text-shadow:0px 0px 0px ;
   font-size: 40px;
   border: none;

}

Ответ 7

<button class="my-btn">submit</button>

CSS

.my-btn {
   background:#ea5514 !important;
   color:#ffffff !important;
}