Imagen dentro de un input

Hoy vamos a aprender como meter una imagen dentro de un input. En ocasiones vemos campos en formularios que tienen una imagen dentro y nos preguntamos ¿cómo lo harán?, la respuesta es más sencilla de lo que pueda parecer.

Primero tenemos que generar un campo input donde queremos introducir nuestra imagen:

Antes de mostraros el código css que solucionará nuestro cometido os explicaré un poco la teoría. A nuestro campo input tenemos que generarle un cierto espacio en blanco donde no se pueda escribir (padding) para así colocar aquí nuestra imagen y que el texto no la pise. Una vez que tenemos esto, colocaremos la imagen como fondo del input y colocándola justamente en esta ubicación, para ello utilizaré la línea general de background:

background: [color] [url imagen] [repetición] [posición vertical] [posición horizontal]

El resultado final sería el siguiente:

ejemplo-imagen-dentro-de-un-input

 

 

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *