[CSS] Unire immagini per il form

Ciao a tutti, io ho creato graficamente un input di testo e dopo averlo tagliato con Photoshop sto cercando di "coddare" il tutto. Solo che non ci riesco...

Ecco il risultato con Photoshop:

Ed ecco quello che ottengo io portando il tutto in html:

E qui i codici:

<div id="form">
<form method="post" name="form">
<input type="text" name="stato" size="50" />
</form>
</div> 

#form { text-align: center; width: 500px; margin: 30px auto; }
#form input:after { background: transparent url(images/form_left.gif) no-repeat; width: 33px; height: 29px; }
#form input { background: transparent url(images/form_center.gif) repeat-x; height: 29px; font: bold 14px "Tahoma"; border: 0; padding: 2px 5px; }
#form input:before { background: transparent url(images/form_right.gif) no-repeat; width: 35px; height: 29px; }

Grazie mille... ciao Davide! ^^"

[makingweb]

perchè non usci come background la prima immagine? e poi usi dei margin per limitare l'area di testo? ora faccio un test e poi ti do il link

Ho capito ben poco cosa intendi... comunque aspetto il link per "capire" sul sorgente! =D
Grazie mille!! ^^"

[makingweb]

Ecco vedi se ti piace l'idea

P.S: poi puoi abbellirlo modificnato il font del testo mettendolo arial e silver :D


{non sono bravo con i css ma tu nel background metti transparent...}

Avevo intuito subito senza guardare il codice... ma c'è un problema! xD
Ho scelto volutamente di separare il campo di testo dal resto, così da allungarlo come voglio.
Ecco il perché del size="50"... spero di essermi spiegato! xD
Grazie mille!! =D

PS. Conoscevo questa soluzione! ^^"

[javascripter]

Prova ad utilizzare la proprietà content:

#form input:after { content: url(images/form_left.gif); width: 33px; height: 29px; }

Lo stesso vale per :before

Niente da fare! =( Non funziona... Altre soluzioni?
Grazie mille comunque... ^^"