css - jquery mobile: How to insert an image into button -
i have kind of problem. have button:
<button type="button" data-theme="c">test</button>
and here instead of text test insert picture:
<img src="resources/images/test-icon.png" align="middle" />
i tried couple of options couldn't find solution.
thank help!
bacause selected tag assume using jquery mobile styled buttons , not classic native browser button version.
if case example never work. while amits example 1 never work in jquery mobile. when jquery mobile styles button hiddes old 1 , creates new 1 out of a tag. takes button text , redirects click events real (now hidden) button.
we can use information modify new button styles. unfortunately in case of inputt button , input submit can't done without javascript.
so show solution.
jquery moible button can constructed this:
<a data-role="button" class="custom-button">button text goes here</a>
we can modify button through pure css, , here's working jsfiddle example: http://jsfiddle.net/gajotres/2c8rj/
html :
<div data-role="page" id="index"> <div data-theme="a" data-role="header"> <h3> first page </h3> <a href="#second" class="ui-btn-right">next</a> </div> <div data-role="content"> <a data-role="button" class="custom-button"></a> </div> <div data-theme="a" data-role="footer" data-position="fixed"> </div> </div>
css :
.custom-button { height: 50px !important; } .custom-button .ui-btn-inner { padding: 0 !important; } .custom-button .ui-btn-inner .ui-btn-text { display: block !important; height: 50px !important; width: 100% !important; background-image: url('http://shop.ascd.org/images/red-error.gif') !important; background-repeat: no-repeat !important; background-position: center !important; }