Immagine dentro input testuale... come?

27-06-2008, 12.50.58

Ciao a tutti, come faccio a mettere un'immagine dentro un:

Codice PHP:


<input type="text" name="nome" />

...? Ho visto in alcuni siti che ci riescono..ma ora non ricordo quali! XD..
Voi lo sapete fare?
Grazie 1000...ciao Davide! ^^

27-06-2008, 12.58.27

Come sfondo.

Ciao!

27-06-2008, 13.08.04

No..proprio deve essere dentro allineata a sinistra...prima del testo ossia:

Codice PHP:


<input type="text" name="ciao" value="IMG testo" />

Ciao! :)

**saitfainder** · 27-06-2008, 13.12.39

Come fondo e poi vai di padding

27-06-2008, 13.13.32

perchè no?
Tutti i campi che hai visto con una immagine al loro interno sono stati realizzati in questo modo.
Puoi allineare l'immagine di sfondo dove vuoi, farla ripetere o meno, dargli desgli spazi esterni ed interni (per esempio per non farci sovrapporre il testo che si scrive)...

Ciao!

27-06-2008, 13.16.03

...un esempio pratico? Lo sfondo è diverso dall'immagine...
Io devo mettere una casetta per esempio ma non come sfondo..deve restare 16x16px..
Ciao! :)

27-06-2008, 13.20.45

Sarà banale ma non potresti fare così?

Codice HTML:

<img src="linkimm">&nbsp;<input type="text" value="">

27-06-2008, 13.24.19

Ma guarda che lo sfondo mica si distorce!
L'immagine messa come sfondo mantiene le su caratteristiche, come se fosse richiama con il tag <img>

Ciao!

**saitfainder** · 27-06-2008, 13.36.10

E con un pò di CSS la posizioni dove vuoi ed eviti che venga ripetuta per riempire tutto lo spazio a disposizione.

27-06-2008, 14.53.24

Ok..ma se io volessi che l'immagine risultasse con la posizione del testo??
Nel senso che ogni volta che metto un immagine il testo accanto ad essa sale...perchè?
-IMG- ciao come stai?
Ossia fosse allineata con il testo..
Ciao! :)

27-06-2008, 14.54.33

Originalmente inviato da debug

....
Puoi allineare l'immagine di sfondo dove vuoi, farla ripetere o meno, dargli desgli spazi esterni ed interni (per esempio per non farci sovrapporre il testo che si scrive)...

Ciaooooo!

27-06-2008, 17.28.55

Ti servono i seguenti attributi, null'altro:

background-image
background-position
background-repeat
padding

I primi tre poi si possono tranquillamente racchiudere nell'unica proprietà background

27-06-2008, 19.58.31

Originalmente inviato da Zorinik

Ti servono i seguenti attributi, null'altro:

background-image
background-position
background-repeat
padding

Ciao Zorinik, ho creato tre esempi di form con immagini di sfondo per il text-area che si modificano al focus; il problema è che solo Firefox riconosce questo CSS.. Qualcuno mi saprebbe dire il perché e come farlo cross-browser ?

Questa è la pagina con tre esempi: http://consapevolezza.altervista.org/b-form.html
.

27-06-2008, 21.18.15

Ci sono riuscito..ma ora l'immagine non è allineata al testo dentro l'input e dopo il testo viene scritto sopra! :(

Codice PHP:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
<style>
.bgx {
background: url(icons/accept.png) no-repeat scroll left top;
}
</style>
</head>

<body>

<form method="POST">
    <p><input type="text" name="asd" size="20" class="bgx" value="asdas"><input type="submit" value="Invia" name="B1"><input type="reset" value="Reimposta" name="B2"></p>
</form>

</body>

</html>

Ecco lo "stamp":

Ciao! :)

27-06-2008, 21.37.56

beh semplicemente perché non usi il padding :-)
alla classe bgx metti un padding-left di circa 20px, così il testo viene scritto spostato a destra ^^

mentre per allineare l'immagine di sfondo modifica 'top' con 'center' :)

27-06-2008, 21.49.56

Originalmente inviato da sIM

Ci sono riuscito..ma ora l'immagine non è allineata al testo dentro l'input e dopo il testo viene scritto sopra! :(

Fai così:

Codice:

<style>
.bgx {
background: url(icons/accept.png) no-repeat 3px 1px ; 
    padding: 2px 0px 3px 24px;
}
</style>

Discussione: Immagine dentro input testuale... come?

LinkBack

Strumenti discussione

Display

Immagine dentro input testuale... come?

Regole di scrittura