更改佔位符顏色後提交表單

根據此：Change an HTML5 input's placeholder color with CSS 的代碼改變的佔位符的顏色是：更改佔位符顏色後提交表單

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ 
    color: #909; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #909; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #909; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: #909; 
}

此代碼是非常好，工作正常。但是，我有一個小問題。我想改變佔位符的顏色，當有人點擊「提交」（唯一的問題是改變它在js上的功能......其他一切正常）。這是我試圖用js：

$("#email").css('::-webkit-input-placeholder', 'red'); 
$("#email").css(':-moz-placeholder', 'red'); 
$("#email").css('::-moz-placeholder', 'red'); 
$("#email").css(':-ms-input-placeholder', 'red');

它不適用於我...我應該改變什麼來解決它？我想這是小事，但我無法修復它...任何建議？

來源

2016-12-26 Web O

更好地使一類具有以上所有的CSS，並通過使用addClass點擊提交**在頁面提交** –

當加入JS該類代碼只是表示成功或不在同一頁面中的消息。不斷變化的顏色如果出現錯誤 –

@Jonasw我（MyClass的） –

除了使用JS更改CSS之外，還可以在表單上添加一個類&將屬性繼承到其中。當某人提交表單時，您的表單標籤上會顯示addClass或toggleClass。

JS：

$('.form-btn').on('click', function(e) { 
    e.preventDefault(); 
    $(this).parent().closest('form').toggleClass('submit-form'); 
});

CSS（繼承與.submit-form類）：

form.submit-form ::-webkit-input-placeholder { 
    /* WebKit, Blink, Edge */ 
    color: red; 
} 

form.submit-form :-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */ 
    color: red; 
    opacity: 1; 
} 

form.submit-form ::-moz-placeholder { 
    /* Mozilla Firefox 19+ */ 
    color: red; 
    opacity: 1; 
} 

form.submit-form :-ms-input-placeholder { 
    /* Internet Explorer 10-11 */ 
    color: red; 
}

看一看下面的代碼片段：

$('.form-btn').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).parent().closest('form').toggleClass('submit-form'); 
 
});

input[type="email"] { 
 
    display: block; 
 
    font-size: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
::-webkit-input-placeholder { 
 
    /* WebKit, Blink, Edge */ 
 
    color: #909; 
 
} 
 

 
:-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 

 
::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ */ 
 
    color: #909; 
 
    opacity: 1; 
 
} 
 

 
:-ms-input-placeholder { 
 
    /* Internet Explorer 10-11 */ 
 
    color: #909; 
 
} 
 

 
form.submit-form ::-webkit-input-placeholder { 
 
    /* WebKit, Blink, Edge */ 
 
    color: red; 
 
} 
 
form.submit-form :-moz-placeholder { 
 
    /* Mozilla Firefox 4 to 18 */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
form.submit-form ::-moz-placeholder { 
 
    /* Mozilla Firefox 19+ */ 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
form.submit-form :-ms-input-placeholder { 
 
    /* Internet Explorer 10-11 */ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="" action=""> 
 
    <input type="email" placeholder="Enter Email" /> 
 
    <button class="form-btn">Submit (change placeholder color)</button> 
 
</form>

希望這有助於！

來源

2016-12-26 16:27:19

希望這個作品！

$("#email").addClass('success');

.success::-webkit-input-placeholder { 
 
    color: orange; 
 
} 
 
.success::-moz-placeholder{ 
 
    color: orange; 
 
} 
 
.success:-ms-input-placeholder{ 
 
    color: orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="email" id="email" placeholder="email" />

來源

2016-12-26 16:29:15 xxCodexx

更改佔位符顏色後提交表單

回答

相關問題