Juanma Santoyo

En ocasiones me llaman friki

Ocultar el texto de un input submit

| 2 Comentarios

Ayer me surgió la necesidad de ocultar el texto de un Input Submit con CSS.

¿Es una locura?. No, porque mi botón tenía una imagen de fondo lo suficientemente descriptiva como para no tener texto.

Una opción podría ser dejar el atributo value vacío, pero necesitaba el value para poder discriminar después en el servidor (tenía más de un botón, y necesitaba saber cual se había pulsado). Además, siendo estrictos, el value no debería ser la solución a un problema gráfico.

En definitiva, la solución que encontré en esta entrada y que posteriormente apliqué consiste en este código CSS:

	input.hidden_text
	{
		/* Imagen de fondo */
		background: transparent url(“imagen.jpg”) left center no-repeat;   

		/* Tamaño de la imagen */
		width: 20px;
		height: 20px;

		text-indent: -9999px;
		border: none;
		color: transparent;

		/* Parche para IE  */
		text-transform: capitalize; 
	}

Espero que os resulte útil.

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

2 Comments

  1. Muy interesante. Habría que realizar alguna prueba con los navegadores actuales para saber si funciona 100%, pero si es así, es una solución muy interesante.

    Saludos

    P.D.: Juanma, deja ya el HTC Desire tranquilo que lo tienes fundido (y Orange que está teniendo colapsos en sus líneas por tu culpa)

  2. No he hecho una prueba a fondo, pero al menos en FF y IE8 funciona bien.

    Luego posteo un testeo más exhaustivo, que no me ha dado tiempo antes.

Deja un comentario

Los campos obligatorios están marcados con *.