2017-04-17 47 views
0

所以我有一個表格,我設法讓所有的佔位符輸入文本淡出除了評論框,除非我定義的註釋框輸入類型=「文本」,然後它會與其他領域相同的設計。這是我在我的接觸形式-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 這是在頁面的最底部,我爲奇怪的語言道歉。

所以就像我說的,我想保持目前的設計,但做出評論框(第四場)內的文本消失,就像其他領域。它只在我將輸入類型定義爲文本時起作用,但是它會像其他字段一樣強制執行相同的設計。 在此先感謝!

回答

0

首先,在所有的input佔位符是placeholder屬性中。但textarea中的內容位於innerHTML中。您必須移動textareaplaceholder屬性中的內容。

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

但是,這會擾亂你的CSS,使類似textarea所有input你看到這樣的:

enter image description here

所以,你必須基本上重寫你的CSS,使它看起來像它早先的自我。使用!important財產在你的CSS,並添加以下內容:

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

這應該呈現預期的行爲:

enter image description here

+0

非常感謝你,工作得很好。 – Rozi

+0

不客氣。 :) – nashcheez

1

從我從看着鏈接的形式你說已經應用於實際設置爲textarea的多數民衆贊成的價值,爲什麼一個有輸入數據之前將其刪除佔位符的理解。 你嘗試過下面的一個嗎?

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

嘿,感謝您的答覆。我嘗試以各種方式編寫代碼,問題是我無法像在其他字段中那樣應用佔位符文本淡出動畫。 – Rozi

+0

您已經針對不同的輸入類型專門應用了佔位符樣式,並且其中未添加textarea,您是否嘗試過使用此規則的 ? textarea :: - webkit-input-placeholder {-webkit-transition:不透明度0.3s linear; 顏色:灰色; } textarea的:焦點:: - WebKit的輸入佔位符{ 不透明度:0; } 檢查此鏈接 https://css-tricks.com/almanac/selectors/p/placeholder/ –

+0

也:: ​​- webkit輸入佔位符供應商前綴是不夠的,使用:: - moz-placeholder和:-ms-input-placeholder –

相關問題