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>
This question is related to
css
html
jquery-mobile
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">
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.
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;
}
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !important
property.
HTML
<a href="#" class="selected_btn" data-role="button">Button name</a>
CSS
.selected_btn
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red !important;
background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}
Here is the demo
Source: Stackoverflow.com