Cambia el aspecto del formulario de contacto

por | May 11, 2018 | CSS, DIVI (Elegant Themes)

Cuando creamos un formulario en DIVI y damos un titulo a nuestro campo, este es el que aparece por defecto. Este título, es el que orienta al usuario a saber que es lo que tiene que escribir.

A veces, interesa que una vez que el usuario se encuentre en el campo, este titulo desaparezca incluso antes de escribir nada y que el fondo del mismo cambie, sabiendo en todo momento en que lugar se encuentra escribiendo.

En este mini-tutorial veremos como podemos hacer esto.

Lo primero y lógico es crear un formulario. En este caso insertaremos el que viene por defecto.

En este sentido, no hay que extenderse mucho, simplemente insertar las siguientes lineas de código en nuestro CSS personalizado para conseguir borrar el titulo cuando nos colocamos en lo alto, cambiar el color de fondo y darle una pequeña sombra, en este caso si se quiere.

El código sería el siguiente:

.et_pb_contact p input:focus, .et_pb_contact p textarea:focus
{
background-color: #7d7d7d; color: white; box-shadow: 3px 3px 3px 3px #BFBFBF;
}

input:focus::-webkit-input-placeholder 
{
color:transparent;
}

textarea:focus::-webkit-input-placeholder 
{
color:transparent;
}

Aquí podéis ver el resultado:

15 + 10 =

Como veréis, esto le da un toque de dinamismo al formulario. Los colores tanto de fondo como de letras, así como la sombra, quedan a gusto del consumidor.

Como siempre digo, espero que este pequeño truco os haya sido de utilidad y si es así comentéis.

Sumario
Cambia el aspecto del formulario de contacto
Titulo del artículo
Cambia el aspecto del formulario de contacto
Descripción
Cambia el aspecto del formulario de contacto mientras escribes, cambiando el color de fondo del campo, así como el color de letra y sombreado.
Autor
Publicado por:
Namaste Web Málaga
Logo
Share This
A %d blogueros les gusta esto: