jquery移动按钮背景颜色答案

【问题标题】：jquery mobile button background colorjquery移动按钮背景颜色
【发布时间】：2012-04-02 15:35:27
【问题描述】：

这是我的 jquery 移动按钮代码

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

我想更改按钮背景颜色，我尝试过内联样式，但它不起作用，但文本颜色正常变化。

谢谢

【问题讨论】：

任何工作代码/示例都可以帮助更好地识别问题，如果可能的话，把它放在 jsfiddle 上

标签： jquery css jquery-mobile

【解决方案1】：

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

css

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

【讨论】：

【解决方案2】：

你不仅要覆盖背景颜色，还要覆盖背景图像渐变到你想要它适合我的颜色

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

}

【讨论】：

【解决方案3】：

如果按钮定义为：

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

那么设置背景的代码是：

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

【讨论】：

【解决方案4】：

这是一个示例“红色”按钮。

只需将 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的代码参考

【讨论】：

【解决方案5】：

只需使用“背景：”而不是“背景颜色：”

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

经过测试，它就像一个魅力。

【讨论】：

谢谢，这就是我一直在寻找的，仅在一个按钮上进行简单覆盖。
知道为什么background 有效而background-color 无效吗？

【解决方案6】：

当您将链接添加到按钮中时，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 伪页面中并将其设置为@987654329 @ 和文字color。

这是一个演示：http://jsfiddle.net/WZ9pf/

文本颜色之前对你有用，因为它被后代元素继承，所以如果你在body元素上设置文本color，如果你不这样做，所有元素都会收到该文本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/

【讨论】：

【解决方案7】：

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

【讨论】：