Is it possible to use a custom image instead of a normal rectangular shape for a jquery mobile button? I'm looking for references on how to do this. The code below is an example of what I want.
Here is an example of a normal button:
<a data-role="button" data-rel="back" data-transition="fade" data-theme="e" data-icon="back" data-iconpos="left">
I attempted to replace it with my own image:
(HTML)
<a data-role="button" data-rel="back" data-theme="app-ios">
(CSS)
/* Custom button styling */
a[data-theme="app-ios"] {
border: none;
width:80px;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: none;
background:url('images/back.png') no-repeat 15px;
border-radius:0;
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Custom shadow and label color */
a[data-theme="app-ios"].ui-shadow,
a[data-theme="app-ios"] {
box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;
background-clip: none; -webkit-background-clip: none; -moz-background-clip: none;
color: white;
font-weight: bold;
top: 5px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
}