css - Custom Input[type="submit"] style not working with jquerymobile button

Question

I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working. My html code is:

<input type="submit"  value="Button name">

My css code is:

input[type="submit"]
{
    border:1px solid red;
    text-decoration:none;
    font-family:helvetica;
    color:red;
    background:url(../images/btn_hover.png) repeat-x;
}

Same style applies when I use following html code:

<a href="#" class="selected_btn" data-role="button">Button name</a>

Answer 1

jQuery Mobile >= 1.4

Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .ui-input-btn.custom-class.

.ui-input-btn.custom-btn {
   border:1px solid red;
   text-decoration:none;
   font-family:helvetica;
   color:red;
   background:url(img.png) repeat-x;
}

Add a data-wrapper-class to input. The custom class will be added to input wrapping div.

<input type="button" data-wrapper-class="custom-btn">

Demo

---

jQuery Mobile <= 1.3

Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.

Demo

div.ui-btn, input[type="submit"] {
 border:1px solid red !important;
 text-decoration:none !important;
 font-family:helvetica !important;
 color:red !important;
 background:url(../images/btn_hover.png) repeat-x !important;
}