Πώς μπορώ να βάλω ένα εικονίδιο μέσα σε μια φόρμα's στοιχείο εισόδου;
Ζωντανή έκδοση στο: Tidal Force theme
Ο ιστότοπος που συνδέσατε χρησιμοποιεί έναν συνδυασμό από τεχνάσματα CSS για να το πετύχει αυτό. Πρώτον, χρησιμοποιεί ένα background-image για το στοιχείο <input>
. Στη συνέχεια, για να σπρώξει τον κέρσορα προς τα πάνω, χρησιμοποιεί το padding-left
.
Με άλλα λόγια, έχουν αυτούς τους δύο κανόνες CSS:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
Απλά χρησιμοποιήστε την ιδιότητα background στο CSS σας.
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}