无法使占位符输入文本消失

Question

所以我有一个表格，我设法让所有的占位符输入文本淡出除了评论框，除非我定义的注释框输入类型=“文本”，然后它会与其他领域相同的设计。这是我在我的接触形式-7插件：

<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> 

这是相关的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; 

} 

你可以看到在下面的链接形式：www.walterbar.co.il 这是在页面的最底部，我为奇怪的语言道歉。

所以就像我说的，我想保持目前的设计，但做出评论框（第四场）内的文本消失，就像其他领域。它只在我将输入类型定义为文本时起作用，但是它会像其他字段一样强制执行相同的设计。 在此先感谢！

Answer 1

首先，在所有的input占位符是placeholder属性中。但textarea中的内容位于innerHTML中。您必须移动textarea的placeholder属性中的内容。

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

但是，这会扰乱你的CSS，使类似textarea所有input你看到这样的：

所以，你必须基本上重写你的CSS，使它看起来像它早先的自我。使用!important财产在你的CSS，并添加以下内容：

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

这应该呈现预期的行为：

Answer 2

从我从看着链接的形式你说已经应用于实际设置为textarea的多数民众赞成的价值，为什么一个有输入数据之前将其删除占位符的理解。 你尝试过下面的一个吗？

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