Цвет фона кнопки мобильного jquery

Question

вот мой код кнопки мобильного jquery

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

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

спасибо

Answer 1

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

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

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

Answer 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/

Вот красный, который я вытащил из готового граДИЕНТЫ: http://jsfiddle.net/WZ9pf/1/

Answer 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

Answer 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

Answer 5

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

css

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

Answer 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;

}

Answer 7

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

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

Тогда код для установки фона:

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