jueves, 10 de mayo de 2018

WORDPRESS - Editar el placeholder

mayo 10, 2018 // by Alex // // No comments

Cuando estamos creando un formulario para la web, no hay nada más prescindible que el "placeholder". A continuación un código simple para personalizar el placeholcer para firefox y chrome. Existen varias maneras para darle estilo al placeholder en los distintos navegadores. Se probó de esta manera con nuestro grupo de programación y de la mano del CMS Wordpress, en este caso ocurrió que no encontrabamos la manera de personalizar el placeholder. Entonces buscado varias veces sin éxito, encontré una manera infalible de editar el placeholder especialmente en Chrome. Te presento la manera que te funcionará.

1. Este sería un formulario con los datos de placeholder que se van a personalizar:

HTML

<label>[text* your-name placeholder "First Name*"]</label> <label>[text* your-name placeholder "Last Name*"]</label> <label>[address* your-address placeholder "Address"]</label> <label>[text apartment placeholder "Apt"]</label> <label>[text city placeholder "City"]</label> <label>[text* state placeholder "State*"]</label> <label>[text zip-code placeholder "ZIP Code"]</label> [textarea your-message placeholder "Mensaje"] [submit "Enviar"]

EDITAR EL PLACEHOLDER PARA FIREFOX

Ten en cuenta no sólo copiar y pegar, sino los tipos de campo de datos que quieres personalizar. Encuentra la lógica según tu propio formulario y lo reemplazas.

CSS

input[type]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { }

EDITAR EL PLACEHOLDER PARA CHROME Y OTROS

Aquí igual ten en cuenta el tipo de dato de entrada.

CSS

input[type="text"]::-webkit-input-placeholder { }

input[type="email"]::-webkit-input-placeholder { }

textarea::-webkit-input-placeholder { }

0 comentarios:

Publicar un comentario