Doppia icona in un input text

[marchese100]

Ciao a tutti,
sono un neofita nella programmazione con html.

Ho la necessità di creare un input di tipo text con all'interno due immagini alle estremità come da figura (scritta "+39" ed immagine con telefonino rosso):
Cattura.JPG

Ho letto qualche guida ma ho trovato solo come si inserisce una immagine ma nulla con due.
L'unica idea che mi è venuta in mente è quella di creare una immagine che abbia le due icone ai lati e che abbia uno sfondo trasparente ma ho il sentore che il risultato non sia un granché; potrei incorrere col problema che poi il testo digitato possa sovrapporsi con almeno una delle due immagini...

Un'altra idea potrebbe essere quella di far mantenere fissa la scritta "+39" e quindi inserire solo l'immagine a destra, ma non so come si fa a mantenere fissa una stringa e non farla cancellare...

Potete aiutarmi a risolvere il problema o almeno a darmi un'indicazione di cosa fare?
Grazie.

[carlomarangoni]

Potresti anche semplicemente mettere "+39 input immagine" uno di seguito all'altro

[marchese100]

Ciao,
grazie per il consiglio, purtroppo devo replicare esattamente l'immagine che ho postato... e soprattutto devo inserire le immagini dentro la text

[carlomarangoni]

Allora la tua idea di fare un'immagine con le icone ai lati è quella giusta! L'immagine la metti come sfondo dell'input e sei a posto!

[marchese100]

ok,
grazie. Non è possibile quindi inserire due immagini distinte?

[carlomarangoni]

Forse con un po di js, ma non è la stessa cosa? perchè le vuoi separate?

[marchese100]

Mha, giusto perchè mi sembrava una cosa più "pulita" e poi era per pura curiosità...
Ancora grazie per il consiglio

[KillerWorm]

Ciao e benvenuto. Se le immagini intendi applicarle come background, con CSS3 è possibile definire immagini multiple.
Vedi questa guida http://www.html.it/pag/19454/sfondi-multipli/

Sul tuo css dovrai quindi definire una regola del genere:

input{
  background: url(immagine_sinistra.png) no-repeat left, url(immagine_destra.png) no-repeat right;
}

[marchese100]

Ciao,
si, è mia intenzione inserirle come immagini di background o almeno è l'unico modo che mi è venuto in mente...

Ti ringrazio per il link e per il codice.
Lo provo e vi faccio sapere.
Buon fine settimana

[marchese100]

Ciao,
ho risolto il problema seguendo le indicazioni di KillerWorm.

Ancora grazie,
marchese.