Creé un campo de búsqueda donde el usuario puede escribir algún texto. Al lado del campo de búsqueda, hay un botón 'X' que está ahí para borrar las entradas de búsqueda. El problema que noto es que, en mi teléfono, el botón 'X' está justo fuera del cuadro de búsqueda de entrada: Este es el ejemplo . ¿Cómo puedo hacer que la 'X' esté dentro del cuadro de búsqueda?
HTML:
<input id="myInput" type="text" placeholder="Search Text..."> <button class="clear">X</button>CSS:
#myInput{ width: 40%; height: 33px; border: 1px solid #000; font-family: 'arial'; font-size: 19px; } .clear { position: relative; z-index: 1; margin-left: -29px; background: transparent; border: 0px none; font-size: 19px; font-weight: bold; vertical-align: middle; }La forma más fácil de resolver esto es envolver la entrada y el botón en un elemento con position: relative + width: min-content . Entonces solo necesitas aplicar position: absolute + right: value al botón
.wrapper { position: relative; width: min-content; } .clear { position: absolute; right: 0px; } <div class="wrapper"> <input id="myInput" type="text" placeholder="Search Text..."> <button class="clear">X</button> </div><input type="search" />Funciona al menos en navegadores basados en Chromium. Sin embargo, tiene algunos efectos secundarios no documentados, como que ESC borrará la entrada.
Si tiene la intención de usar su propio botón de borrado personalizado, adapte esta idea colocando ambos elementos en un elemento principal compartido. Haga que la input ocupe todo el tamaño del elemento principal y luego use position: absolute; en el botón Borrar.