No puedes colocar una imagen de manera segura en un campo input text. Igual funciona en algunos navegadores y te sirve a ti, pero no creo que funcione siempre. Yo lo que haría sería montarlo en un elemento corriente, colocando el input dentro del elemento y poniéndole el fondo en ese elemento. Todo con CSS.
El HTML que usaría sería como este:
<div class="input-icono">
<input type="text" name="input" value="Texto del campo">
</div>
Luego, el CSS usa un icon de imagen como fondo. El icono lo tienes que usar tú el que más te convenga con el color que necesites en tu interfaz. Lo colocas y lo posicionas dentro del elemento, en la parte de la izquierda, haciendo un padding en el <div>, de modo que el campo input no se ponga encima del fondo.
Otro detalle es que el input le quites el borde. El borde lo colocas en el elemento <div>, como imitando el borde que tendría el input, y el input sin borde hará que parezca que el <div> sea el campo input.
El CSS podría ser más o menos el siguiente:
.input-icono {
background-image: url('success.png');
background-repeat: no-repeat;
background-position: 4px center;
background-size: 20px;
display: flex;
align-items: center;
width: 300px;
padding-left: 28px;
height: 30px;
border: 1px solid rgba(9, 113, 163, 1);
border-radius: 3px;
}
.input-icono input {
width: 100%;
font-size: 0.9em;
border: none;
}
.input-icono input:focus {
outline: none;
}
No necesitas Javascript para que esto funcione. Pero creo que una cosa que sí te vendría bien es que, al pulsar sobre el <div>, lleves el foco de la aplicación dentro del campo input.
document.querySelector('.input-icono').addEventListener('click', function() {
this.querySelector('input').focus();
});
Ya lo más interesante sería que te hicieras un componente con esta interfaz de usuario, ya que así podrías reutilizarlo las veces que necesites. Puedes hacerte un custom element de web components, un plugin de jquery o lo que te venga bien.