Contact form 7; not able to style the textarea

[aap]

Hi
I am following one of the themeco cf7 videos; right around 5:40 e are showinon thow to style the textarea, with .wpcf7 textarea { …
however changes I made do need to be being applied. Also, the placeholder styling is not being applied to this textarea).

Details to follow in private message; THANKS

Here is my css

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



.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}

.row.two-cols .col {
  flex-basis: 48%;

}

@media (max-width:480px) {
	.row.two-cols .col {
  	flex-basis: 100%;
	}
}

.wpcf7 .wpcf7-form-control-wrap {
  display: block;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] 
.wpcf7 textarea {
 
    font-family: 'Open Sans';
  	font-weight: 700;
  	font-size: 0.9em;
  	color: red;
  	line-height: 1.6;
  
  
  width: 100%;
  background: transparent;
  border:0px;
  border-radius:0px;
  box-shadow: none;
  border-bottom: 1px solid #a7a8ad;
  padding: 3em 0px 1.8em;
     
      

        
}

.wpcf7 input[type="text"]:focus {
  box-shadow: none;
}

.wpcf7 
{
  box-shadow: none;
  margin-bottom: 0;
}

.wpcf7 .wpcf7-radio span {
  color: #a7a8ad;
}

.wpcf7-not-valid-tip {
  color: #d78a8a;
}

.wpcf7 ul.trx_mscf_progressbar {
  margin: 0 0 2.5em;
}

.wpcf7 .trx_mscf_progressbar li.trx_mscf_bullets.active {
	color: rgb(185,150,92);
}

.wpcf7 .trx_mscf_progressbar li.trx_mscf_bullets.active:after, 
.wpcf7 .trx_mscf_progressbar li.trx_mscf_bullets.active:before {
  background: rgb(185,150,92);
  color: #fff;
}

.wpcf7 .trx_mscf_next,
.wpcf7 .trx_mscf_prev,
.wpcf7 input[type="submit"]{
  color: rgb(255, 255, 255);
  background-color: rgb(185, 150, 92);
  border: 0px;
  padding: 6px 19px;
  border-radius: 3px;
  margin: 20px 0;
  text-shadow: none;
  box-shadow: none;
  
  line-height: 1.3;
  font-size: 15px;
}

.wpcf7 .trx_mscf_prev {
  margin-right: 15px;
}

.wpcf7 br {
    display: none;
}

[nabeel]

Hi @flashfog,

Thank you for reaching out to us. I checked your CSS and there is a syntax issue in your custom CSS which is preventing your code to work. There is a missing comma between the multiple selectors, please find this part in your code:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] 
.wpcf7 textarea

and replace it with:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"], 
.wpcf7 textarea

To learn more in-depth contact form 7 styling, I’d recommend you to please follow https://contactform7.com/styling-contact-form/ or https://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/

Please note that the custom coding is outside of our support scope so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[aap]

omg i can’t believe i missed that.
Thank you for the resources, …learning continues.
I really thank you for taking the time to answer my question.

A

[jade]

You’re most welcome, A.