2

Llevo un tiempo batallando con esto, me podrían dar una mano?

Encontré un código CSS para personalizar el formulario de contacto del plugin "Contact Form 7" de Wordpress. El diseño queda bien, pero si quiero agregar un menú desplegable no lo considera el código CSS y no sé como incluirlo para que se personalice como los otros campos. Favor me puedan ayudar, adjunto captura y envío código del CSS utilizado:

.wpcf7-text,
.wpcf7-textarea,
.wpcf7-captchar {
  background-color: #eee !important;
  border: none !important;
  width: 100% !important;
  -moz-border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border-radius: 0 !important;
  font-size: 14px;
  color: #89b023 !important;
  padding: 16px !important;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wpcf7-submit {
  color: #89b023 !important;
  margin: 8px auto 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 6px 20px;
  line-height: 1.7em;
  background: transparent;
  border: 2px solid;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.wpcf7-submit:hover {
  background-color: #89b023;
  color: #fff !important;
  border-color: #89b023;
  padding: 6px 20px !important;
}

introducir la descripción de la imagen aquí

1 respuesta 1

0

depende de como las quieras personalizarlo, porque resulta que a día de hoy los select nativos no son tan customizables como los otros campos de formulario, porque si bien puedes cambiar algunos estilos, siempre vas a tener limitaciones.

Ahora, esto no quiere decir que no puedas modificar los selects del Contact form, por ejemplo puedes probar estas clases:

.wpcf7 select{
  /*Para el contenedor*/
}

.wpcf7 option{
  /Para las opciones*/
}

O también puedes optar por añadirle un id y llamarla via css, así:

[text text-123 id:very-special-field]

Y en el css:

#very-special-field{
 /*Tus estilos*/
}

Prueba y me comentas, si te funcionaron.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.