Snippets

Como dar estilos a los placeholder de HTML5

0

En HTML5 los elementos inputs obtienen algunos atributos importantes, entre esos los placeholder o marcador de posición de los inputs, estos se utilizan  para la llamada a la acción dentro de elementos de entrada de texto (input, textarea), básicamente una descripción corta de lo que se espera recibir en dicho campo. En esta entrada te mostraré cómo mejorar un poco la su apariencia por medio de CSS.

Lo primero es: Cómo definimos un atributo placeholder.

<input type="text" placeholder="Ingresa tu nombre">

Lo que resultaría:

Para cambiar el color de texto que se aplica por defecto vamos a utilizar un poco de CSS.

::-webkit-input-placeholder { color:#c0392b; } /* Chrome/Opera/Safari */
::-moz-placeholder  { color:#c0392b; }/* Firefox 19+ */
:-moz-placeholder   { color:#c0392b; }/* Firefox 18- */
:-ms-input-placeholder  { color:#c0392b; } /* IE 10+ */

Sorprende un poco que hasta ahora tengamos que utilizar esta cantidad de código para cambiar el color del placeholder, pero eso es lo que tenemos hasta el momento. y ojo que no los aplica en navegadores antiguos. El resultado sería:

Podemos aplicar más propiedades de CSS, aunque no todas. Por ejemplo, (las propiedades fonts, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, opacity, text-overflow entre otras)

Veamos un ejemplo con text-decoration, color y opacidad:

::-webkit-input-placeholder {
   color: #E91E63; 
   text-decoration: line-through; 
   opacity: .4;
}
::-moz-placeholder { 
   color: #E91E63; 
   text-decoration: line-through; 
   opacity: .4;
}
:-moz-placeholder {
   color:#E91E63; 
   text-decoration: line-through; 
   opacity: .4;
}
:-ms-input-placeholder {
   color: #E91E63; 
   text-decoration: line-through; 
   opacity: .4;
}

Si queremos ocultar el texto una vez entremos en focus sobre el campo y mostrarlo una vez salga del focus? , fácil, utilizamos la propiedad opacity y un poco de transición para que se vea con un efecto elegante:

::-webkit-input-placeholder       {
	opacity: 1; 
	transition: opacity .3s ease;
}
::-moz-placeholder                {
	opacity: 1; 
	transition: opacity .3s ease;
}
:-moz-placeholder                 {
	opacity: 1; 
	transition: opacity .3s ease;
}
:-ms-input-placeholder            {
	opacity: 1; 
	transition: opacity .3s ease;
}

/* Estilos para el estado focus*/

:focus::-webkit-input-placeholder {
	opacity: 0; 
	transition: opacity .3s ease;
}
:focus::-moz-placeholder          {
	opacity: 0; 
	transition: opacity .3s ease;
}
:focus:-moz-placeholder           {
	opacity: 0; 
	transition: opacity .3s ease;
}
:focus:-ms-input-placeholder      {
	opacity: 0; 
	transition: opacity .3s ease;
}

También podemos cambiar el placeholder de posición con una pequeña transición cuando esté en un estado el input, por ejemplo focus:

::-webkit-input-placeholder       {
	text-indent: 0px;   
	transition: text-indent .4s ease;
}
::-moz-placeholder                {
	text-indent: 0px;   
	transition: text-indent .4s ease;
}
:-moz-placeholder                 {
	text-indent: 0px;   
	transition: text-indent .4s ease;
}
:-ms-input-placeholder            {
	text-indent: 0px;   
	transition: text-indent .4s ease;
}
:focus::-webkit-input-placeholder {
	text-indent: 500px; 
	transition: text-indent .4s ease;
}
:focus::-moz-placeholder          {
	text-indent: 500px; 
	transition: text-indent .4s ease;
}
:focus:-moz-placeholder           {
	text-indent: 500px; 
	transition: text-indent .4s ease;
}
:focus:-ms-input-placeholder      {
	text-indent: 500px; 
	transition: text-indent .4s ease;
}

En fin, lo que podemos hacer es muy bueno y facil, ya todo depende de tu imaginación.

Como dar estilos a los placeholder de HTML5

Comentar

avatar
wpDiscuz