CSS Drop-down Menu Contact Form 7 Wordpress

Question

CSS Drop-down Menu Contact Form 7 Wordpress

Navigation

#1 by (0 votes)

1

I've been struggling with this for a while, could you give me a hand?

I found a CSS code to customize the contact form of the "Contact Form 7" plugin of Wordpress. The design is fine, but if I want to add a drop-down menu it does not consider it the CSS code and I do not know how to include it to be customized like the other fields. Please can you help me, attached capture and sending CSS code used:

.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;
}

css wordpress contact-form-7

asked by Lonsocorp 06.05.2018 в 19:05

source

1 answer

Get Array list with JSON in android studio SSL SOCKET JAVA

score 0 · Answer 1

It depends on how you want to customize it, because it turns out that today the select native are not as customizable as the other form fields, because although you can change some styles, you will always have limitations.

Now, this does not mean that you can not modify the Contact form selects, for example you can try these classes:

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

.wpcf7 option{
  /Para las opciones*/
}

Or you can also choose to add an id and call it via css, like this:

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

And in the css:

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

Try and tell me, if they worked for you.