Βάλτε το εικονίδιο μέσα στο στοιχείο εισόδου σε μια φόρμα

Ο ιστότοπος που συνδέσατε χρησιμοποιεί έναν συνδυασμό από τεχνάσματα CSS για να το πετύχει αυτό. Πρώτον, χρησιμοποιεί ένα background-image για το στοιχείο <input>. Στη συνέχεια, για να σπρώξει τον κέρσορα προς τα πάνω, χρησιμοποιεί το padding-left.

Με άλλα λόγια, έχουν αυτούς τους δύο κανόνες CSS:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Μπορείτε να δοκιμάσετε αυτό:

input[type='text'] {
    background-image: url(images/comment-author.gif),
    background-position: 7px 7px,
    background-repeat: no-repeat,
}

Απλά χρησιμοποιήστε την ιδιότητα background στο CSS σας.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}