Unable to make the placeholder input text disappear

Question

so I have a form and I managed to make all the placeholder input text fade out except for the comment box, unless I define the comment box input type="text" and then it gets the same design as the other fields. This is what I have in my contact-form-7 plugin:

<style>
input[type="email"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="email"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
input[type="phone"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="phone"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}
}
input[type="text"]::-webkit-input-placeholder  {
  -webkit-transition: opacity 0.3s linear; 
  color: gray;
}

input[type="text"]:focus::-webkit-input-placeholder  {
  opacity: 0;
}

</style>
<center> 

<label for=".elementor-6 .elementor-element.elementor-element-5m0lukt .wpcf7 input[type="text"]"><input type=text text* your-name placeholder="שם" required id:name </input></label>

<label for= ".wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-required.wpcf7-validates-as-tel* your-email"> <input type="phone" tel* tel-196 input placeholder="טלפון" id:phone required</input></label>

<label for=".wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email"]"><input type=email email* your-email placeholder="אימייל" ID:email </input></label>

[textarea details id:details class:details placeholder="ההודעה שלכם"]

[submit "דברו איתנו"]
</center>

And this is the relevant CSS:

.wpcf7-form-control.wpcf7-submit {
  width: 20% !important;
  text-align: center !important;
  background-color: #316e35 !important;
  color: white !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
}

input[type="submit"]:hover {
  width: 20% !important;
  text-align: center !important;
  letter-spacing: 4px;
  background-color: white !important;
  color: #316e35 !important;
  font-family: open sans hebrew condensed;
  font-size: 20px;
  font-style: normal !important;
  font-weight: 900;
  animation: bounce 1s;
  border: 0;
  border-radius: 100em;
  display: inline-block;
  left: auto;
  right: auto;
  overflow: hidden;
  min-width: 158.5px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8);
  transition: opacity 0.5s 0.5s ease;
  font-family: open sans hebrew condensed;
  font-style: italic;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  background: #f9f9f9;
  color: black;
}

body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
  transition: opacity 0.5s 0.5s ease !important;
  opacity: 0 !important;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease;
  opacity: 0;
}

[placeholder] {
  width: 25% !important;
  background-color: rgba(255,255,255,0.8) !important;
  height: 40px !important;
  color: #333333 !important;
  margin: 0 auto;
  text-align: center !important;
  border-radius: 999em !important;
  display: inline-block;
  left: auto;
  right: auto;
  font-family: open sans hebrew condensed !important;
  font-style: italic;
  min-width: 164px;
}

[placeholder]:focus {
  background-color: rgba(221,221,221,0.8) !important;
  transition: opacity 0.5s 0.5s ease !important;
  font-family: open sans hebrew condensed !important;
  font-style: italic !important;
  border: 2px solid #316e35 !important;
  box-shadow: 0 0 10px #719ECE !important;
  min-width: 164px;
}

#mc_embed_signup .mc-field-group{
  width:100% !important}


#details.wpcf7-form-control.wpcf7-textarea.details {
  width: 40%;
  Height: 150px;
  background-color: rgba(255,255,255,0.8) !important;
  color: #333333 !important;
  margin: 0 auto;
  text-align: center !important;
  display: inline-block;
  left: auto;
  right: auto;
  font-family: open sans hebrew condensed !important;
  font-style: italic;
  min-width: 200px;}

#details.wpcf7-form-control.wpcf7-textarea.details:focus {
  background-color: rgba(221,221,221,0.8) !important;
  font-family: open sans hebrew condensed !important;
  font-style: italic !important;
  border: 2px solid #316e35 !important;
  box-shadow: 0 0 10px #719ECE !important;
  min-width: 200px;
  transition: opacity 0.5s 0.5s ease !important;
  -webkit-transition: opacity 0.3s linear !important; 
  color: gray;

}

You can see the form in the following link: www.walterbar.co.il It's at the very bottom of the page, I apologize for the weird language.

So like I said, I want to keep the current design but make the text inside the comment box (Fourth field) disappear just like the other fields. It only works if I define the input type as text, but then it forces the same design like the rest of the fields. Thanks in advance!

Answer 1

First of all, the placeholders in all the input are inside the placeholder attribute. However, the content inside the textarea is in the innerHTML. You have to move the content inside the placeholder attribute for the textarea.

<textarea name="details" placeholder="ההודעה שלכם" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea details" id="details" aria-invalid="false"></textarea>

But, this will disturb your css and make the textarea similar to all the input you see like this:

So you have to override your css basically to make it look like its earlier self. Use the !important property in your css and add the following:

#details.wpcf7-form-control.wpcf7-textarea.details {
    width: 40% !important;
    height: 150px !important;
    border-radius: 0 !important;
}

This should render the expected behaviour:

Answer 2

From what I understood from looking at the form in the link the placeholder you've said to have applied is actually set as value of textarea thats why one had to remove it before entering data. did you try the one below?

<textarea id="details" class="details" placeholder="ההודעה שלכם"></textarea>