jQuery Mobile with ASP Button Background Color Change

Question

I'm using Jquery mobile on ASP Page, I could not change the back ground color. Tried with below codes, no luck. How can i change the back ground color of the asp buttons in jquery mobile.

 <div class="ui-body ui-body-b" >
            <div class="ui-grid-a" >
     <div class="ui-block-a" >
                     <asp:Button ID= "Button1" runat="server" Text="Clear"  
                       data-role="button" class="custom-btn"  />
                </div>
                <div class="ui-block-b" >
                <asp:Button ID="Button2" runat="server" Text="Submit"  
                        data-role="button"  />
                  </div>
            </div>
        </div> 



.ui-grid-a .ui-block-a   .ui-btn.Button1 .ui-btn-inner 
    {
         background: green !important; 
    }

 ui-body.ui-body-b .ui-grid-a .ui-block-a  .custom-btn .ui-btn-inner 
    {     
        color: green !important;
    } 

Answer 1

Omar gave you the correct answer in his comment. The asp.net button is rendered to HTML as an <input> then jQM 'enhances' it by surrounding it in a <div> with a class of ui-btn and by hiding the <input>. So to change the background color, you actually need to change the ui-btn div styles.

Applying a CssClass to the ASP.Net control will have no effect. Instead, on the client side try Omar's suggestion:

div.ui-btn { 
    background-color: green !important; 
    background-image: none !important; 
}

In jQM 1.3, the gradient is implemented in background-image. If you want to target a specific button, you might want to assign an ID to its container and then use #containerid .ui-btn{}