CODEWITHSUNDEEP
jquerycssjquery-mobile
h_a86
h_a86

Reputation: 772

jquery mobile button background color

here is my code of a jquery mobile button

<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

Upvotes: 11

Views: 51230

Answers (7)

warriorg
warriorg

Reputation: 86

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

css

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

Upvotes: 0

Eng.Mohamed ayed
Eng.Mohamed ayed

Reputation: 1

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;

}

Upvotes: 0

bart59
bart59

Reputation: 371

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

Upvotes: 1

theunexpected1
theunexpected1

Reputation: 1035

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

.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

Upvotes: 3

user1182155
user1182155

Reputation: 217

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.

Upvotes: 19

Jasper
Jasper

Reputation: 75993

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:

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;
}​

This targets the .ui-btn-inner element which is a descendant of the a.ui-btn element (your original link, which I added the my-btn class to), which is in a jQuery Mobile pseudo-page and sets it's background and the text color.

Here is a demo: http://jsfiddle.net/WZ9pf/

The text color was working for you before because it gets inherited by descendant elements, so if you set text color on the body element for example, all elements will receive that text color if you don't specify another one further down the tree.

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:

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

Here is a red one I pulled from the pre-made gradients: http://jsfiddle.net/WZ9pf/1/

Upvotes: 8

benni_mac_b
benni_mac_b

Reputation: 8877

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.

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

You can view the existing themes here. 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/

Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html

Upvotes: 2

Related Questions