Ocultar Texto del Boton Submit con CSS

Aquí está la solución para deshacerte del texto de los botones submit mediante CSS, y no solo eso, también vamos a reemplazar el botón con una imagen.

No te vas a creer el parche que he tenido que usar para hacerlo funcionar en IE6… en serio, ¿cuándo demonios va a morir este navegador? Otra pesadilla de mañana gracias a él.

El Código HTML

<input type="submit" class="form-submit" value="Search" id="edit-submit" name="op"/>

El Código CSS

#edit-submit {
  width: 25px;
  height: 25px;
  text-indent: -9999px;
  background: url(../images/icon-search-25x25.gif) left top no-repeat; /* ruta hacia tu imagen */
  border: none;
  margin: 0 0 0 10px;
  padding: 0;
  color: transparent;
  text-transform: capitalize;  /* Este es el parche para IE   */
}

Si, sé que parece ridiculo usar la propiedad text-transform para hacer desaparecer el texto, pero estamos hablando de IE6.

Disfruta y convence a tus clientes de que paren de usar IE6.

Entry posted on junio 9th, 2009 at 08:22 under CSS, Navegadores.
Follow any responses through the RSS 2.0 feed , leave a response, or trackback from your own site.