oculto dentro de jQuery Mobile own documentation me encontré con un enfoque que funcionaba bien para mi cuadro de búsqueda + botón de búsqueda aplicación.
En esa página, están comparando cosas una al lado de la otra usando un diseño simple de <table> que me inspiró a confiar en esto también. Si bien las tablas NO son el recurso de referencia para hacer bien el diseño/diseño, es extremadamente efectivo, simple y elude muchas de las molestias de las soluciones provisionales que estoy viendo aquí. Esto es lo que mi enfoque puede hacer por su jsfiddle you linked. Ver la cuarta iteración.
En otras palabras, debido a la complicada naturaleza de cómo se construye una página jQuery Mobile, añade en divs y un estilo que no están en su margen de beneficio, etc., esto podría ser su mejor opción para este escenario particular:
- Querer dos columnas de elementos donde la segunda columna tiene un ancho fijo.
- Donde la primera columna se expande para llenar el ancho de la pantalla al cambiar el tamaño.
- Donde quiera que los elementos abarquen todo el ancho del dispositivo.
(Cabe destacar que, si se quería modificar cualquiera de estos aspectos particulares, algo de relleno CSS simple o alineación debe hacer el truco a partir de esta solución base)
<table style='width:100%'><tr>
<td>
<input type='text' (or type='search') />
</td>
<td style='font-size:80%; width:7em'>
<input type='submit' value='Submit' />
</td>
</tr></table>
Obviamente, debe name y darle un id a estos artículos si desea publicarlos en algún lugar o manipularlos en javascript. Espero que esto sea útil para otra persona que no se deje intimidar por la naturaleza de <table> s. No he podido ver una desventaja de este enfoque utilizando la interfaz/temática simple de jQuery Mobile.
Por último, es posible que desee detenerse y preguntarse si es necesario un botón de envío. En los dispositivos móviles como el safari móvil, hay un botón en el teclado con la etiqueta "Ir" cada vez que se interactúa con los elementos de entrada del formulario. Esto funciona igual que una tecla de retorno y puede enviar el término de búsqueda. No he investigado esta opción en otros navegadores en este momento.
(Esto no es una solución para rivalizar con su enfoque para cambiar el icono del cuadro de búsqueda. Eso es muy inteligente, pero no parece ser lo que su pregunta original estaba a punto.)
he encontrado otra solución que Publiqué más tarde. Consulte y elija el que mejor funcione para usted. –