JQuery Mobile - Position a input button next to an input text area

Question

I am trying to get a inputtext area and a submit button attached just to the right of it. Ideally, the two together will use 100% of the width and

Answer 1

I found a new answer for those of you that are looking at this thread.

I find it much better in terms of integration with jQuery Mobile. However, it could be vulnerable to upgrades in jQuery Mobile since it relies on how the icon image file is organized.

I simply added this CSS rule :

.ui-icon-searchfield:after {background-position: -252px !important;}

And the icon magically turns into a data-icon="check". Exactly what I was looking for! You can pick whatever icon you want by changing the offset and looking into images/icons-18-white.png for the icon mapping.

Of course you will want to refine the selector so you only target the input boxes you want to change.

Enjoy the hack.