viernes, 1 de octubre de 2010

Texto en el fondo del Input (placeholder)

Funciona en:
Para poner texto de fondo en un input y que desaparezca cada vez que se escribe simplemente se utiliza PLACEHOLDER, un ejemplo a continuación:

<input type="text" name="name" placeholder="Esto és un placeholder">
Ejemplo visual:

23 comentarios:

  1. Buenas!
    muchisimas gracias por tu aportación y la ayuda!

    ResponderEliminar
  2. no funciona con opera.. pero esta buenisimo..

    ResponderEliminar
  3. En Opera no... aunque personalmente creo que al final funcionará en todos los navegadores

    ResponderEliminar
  4. buenísimo gracias pero una inquietud se podrá poner de alguna forma de fondo texto en un div común y corriendo

    ResponderEliminar
  5. he estado buscando y de momento no tengo respuesta xD seguire mirando cuando tenga más tiempo! gracias!!

    ResponderEliminar
  6. y como cambiarias el color del texto que aparece??

    ResponderEliminar
    Respuestas
    1. Para cambiar el color del placeholder inserta este CSS en tu HTML:

      ::-webkit-input-placeholder { /* WebKit browsers */
      color: #333fff;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color: #333fff;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #333fff;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #333fff;
      }

      Eliminar
  7. Excelente post, de hecho lo estuve buscando en muchas webs pero no habia encontrado la solución.

    Saludos!

    ResponderEliminar
  8. Excelente aporte.

    Busque mucho pero nunca encontraba nada similar.....

    GRACIAS..........

    ResponderEliminar
  9. Más sencillo imposible. Muchas gracias.

    ResponderEliminar
  10. Gracias amigo excelente, aporte
    Investigando si añadimos esto se logra un mejor resultado
    {
    onfocus="this.placeholder=''" onblur="this.placeholder='Ingrese su Nombre'" style="width:280px"
    }
    el onfocus y el onblur son funciones javascript para hacerle el efecto de desaparecer en lo que colocamos el cursos alli y el style=width es para darle un ancho valido, dado que no funciona el size con el, solo se debe añadir en nuestro input
    Buen día

    ResponderEliminar
    Respuestas
    1. Muchas grácias me gusta que participemos todos! :D

      Eliminar
    2. creeme me sente un rato a buscar y luego pense en html 5 me acorde que colocaron varios formatos y comence a buscar.. y llegue a tu pagina.. asi que ahora ahondare más, gracias a ti

      Eliminar
  11. La verdad estaba buscando eso hace muxisimo... Muxasss gracias amigo :)

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario. Si hacer click en +1 ayudarás a otras personas a encontrarlo :D

      Eliminar
  12. Buenisimo gracias!!!

    ResponderEliminar