jquery 移动按钮背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9748337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile button background color
提问by h_a86
here is my code of a jquery mobile button
这是我的 jquery 移动按钮代码
<a href="#" data-role="button" style="color:green; background-color:red";>
Search
</a>
I want to change button background color, i have tried inline style but its not working however text color changes normally.
我想更改按钮背景颜色，我尝试过内联样式但它不起作用但是文本颜色正常更改。
thanks
谢谢
回答by user1182155
Simply use "background:" instead of "background-color:"
只需使用“背景：”而不是“背景颜色：”
<a href="[url]" data-role="button" style="background: green; color: white;">Search</a>
Tested it and it works like a charm.
测试它，它就像一个魅力。
回答by Jasper
jQuery Mobile initialized widgets and adds HTML structure when you make a link into a button. You can use this structure to target button widgets and their descendant elements to change the styles we want to change:
jQuery Mobile 初始化小部件并在您将链接添加到按钮时添加 HTML 结构。您可以使用此结构来定位按钮小部件及其后代元素以更改我们想要更改的样式：
HTML --
HTML --
<a class="my-btn" data-role="button" href="#">
Search
</a>
CSS --
css --
.ui-page .ui-content .ui-btn.my-btn .ui-btn-inner {
color : green;
background : red;
}?
This targets the .ui-btn-innerelement which is a descendant of the a.ui-btnelement (your original link, which I added the my-btnclass to), which is in a jQuery Mobile pseudo-page and sets it's backgroundand the text color.
这针对作为.ui-btn-inner元素后代的a.ui-btn元素（您的原始链接，我将my-btn类添加到该链接中），该元素位于 jQuery Mobile 伪页面中并设置它background和 text color。
Here is a demo: http://jsfiddle.net/WZ9pf/
这是一个演示：http: //jsfiddle.net/WZ9pf/
The text color was working for you before because it gets inherited by descendant elements, so if you set text coloron the bodyelement for example, all elements will receive that text colorif you don't specify another one further down the tree.
文本颜色以前对您有用，因为它被后代元素继承，因此，例如，如果您color在body元素上设置文本，则color如果您没有在树的更下方指定另一个元素，则所有元素都将收到该文本。
So you can see what jQuery Mobile does to a link that gets turned into a button, here is what the above HTML turns into:
所以你可以看到 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>
Also, if you want to create gradients easily, here is a great tool: http://www.colorzilla.com/gradient-editor/
另外，如果您想轻松创建渐变，这里有一个很棒的工具：http: //www.colorzilla.com/gradient-editor/
Here is a red one I pulled from the pre-made gradients: http://jsfiddle.net/WZ9pf/1/
这是我从预制渐变中提取的红色：http: //jsfiddle.net/WZ9pf/1/
回答by theunexpected1
Here's a sample 'red' button.
这是一个示例“红色”按钮。
Just add the data-theme="f" to your button tag and then this could be a recommended method where you can create your own theme-able buttons
只需将 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')"; }
Code reference from https://gist.github.com/1057852
回答by benni_mac_b
JQuery mobile styles are all applied using themes. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon.
JQuery 移动样式都是使用主题应用的。当一个链接被添加到容器中时，它会自动分配一个与其父栏或内容框匹配的主题样本字母，以将按钮可视化地集成到父容器中，就像变色龙一样。
So a button placed inside a content container with a theme of "a" (black in the default theme) will be automatically assigned the button theme of "a" (charcoal in the default theme).
因此，放置在主题为“a”（默认主题中为黑色）的内容容器中的按钮将被自动分配为“a”（默认主题中为木炭）的按钮主题。
You can view the existing themes here. http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html
您可以在此处查看现有主题。 http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html
If you want to create your own you can use theme roller: http://jquerymobile.com/themeroller/
如果你想创建自己的，你可以使用主题滚轮：http: //jquerymobile.com/themeroller/
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html
来源：http: //jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html
回答by bart59
If the button is defined as:
如果按钮定义为：
<button type="button" id="yourbutton">Hello</button>
Then the code to set the background is:
那么设置背景的代码是：
$('#yourbutton').parent().find('.ui-btn-inner').css("background-color",highcolor);
回答by Eng.Mohamed ayed
you have to override not only the background color but the background-image gradient to the color that you want it works perfect for me
你不仅要覆盖背景颜色，还要覆盖背景图像渐变到你想要的颜色，它对我来说是完美的
.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;
}
}
回答by warriorg
<button class="my-btn">submit</button>
css
css
.my-btn {
background:#ea5514 !important;
color:#ffffff !important;
}?
