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元素的后代（您的原始链接，我添加了background类），它位于jQuery Mobile伪 - 页面并设置为color和文本color。

以下是演示：http://jsfiddle.net/WZ9pf/

文本颜色之前适合您，因为它由后代元素继承，因此如果您在body元素上设置文本color，则所有元素都将接收该文本{{1}如果你没有在树下再指定另一个。

因此，您可以看到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 type="button" id="yourbutton">Hello</button>

然后设置背景的代码是：

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

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 class="my-btn">submit</button>

CSS

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

jquery移动按钮背景颜色

7 个答案: