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

css, html, jquery-mobile

Solution

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

Problem

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

Original source