Un usuario me preguntó como podía insertar una imagen en un campo de texto. Bien, es muy sencillo, y en esta entrada se explicará paso a paso.
Código HTML
Como vemos es un formulario (form) formado por 3 input de tipo texto con sus respectivas clases.
<form action="myaction.php" method="post" id="myid"> <p><input type="text" name="author" class="author" value="Autor" size="22" tabindex="1" /></p> <p><input type="text" name="email" class="mail" value="Email>" size="22" tabindex="2" /></p> <p><input type="text" name="url" class="website" value="Url" size="22" tabindex="3" /></p> </form>
Código CSS
El código CSS se divide en dos partes. Una es la parte cuando no estamos presionando el formulario, y otra cuando clickamos en el formulario (hover -aunque esta parte es más secundaria y no hace falta a menos que queramos dar más estética al formulario-).
Si no estamos presionando el formulario, el código CSS es este (solo nos fijaremos en la clase “author”:
#commentform input.author{
background-position: left center;
padding-left: 17px;
width:183px;
background-image: url(images/user.gif);
background-repeat: no-repeat;
}
Si nos fijamos vemos una imagen de fondo (el icono del formulario que aparece al principio) orientado hacia la izquierda (background-position) con un padding a la izquierda de 17 px. Este padding es necesario especificarlo ya que si no, el texto se “montará” encima del fondo (icono). El padding debe ser 1 o 2 píxeles superior al ancho total del icono que vayamos a añadir. Finalmente indicamos el ancho de todo el formulario, que en este caso es de 183 píxeles.
El código CSS cuando hemos presionado el formulario es este:
#commentform input.author[type="text"]:focus {
background-color: #FFF;
background-position: left center;
padding-left: 17px;
width:183px;
background-image: url(images/user2.gif);
background-repeat: no-repeat;
}
Aplicando focus al formulario podemos asignarle un nuevo fondo a la caja de texto, con un nuevo icono (como es este caso, ya que puede haber muchas variantes) y con esto ya tendríamos nuestro formulario más estilizado y acabado.
Este hack tiene XHTML 1.0 Transitional válido y funciona tanto en Safari 3+. 4+, como en Firefox 3.x e Internet Explorer.
