Изменение цвета заполнителя после отправки формы

Question

В соответствии с этим: 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'); 

Это не работает для меня ... Что я должен изменить, чтобы исправить это? Я думаю, это что-то маленькое, но я не могу это исправить ... Любые предложения?

Answer 1

Вместо изменения CSS с помощью JS вы можете добавить класс в форму &, наследуя ваши свойства. Что-то вроде 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>

Надеюсь, это поможет!

Answer 2

Надеюсь, это сработает !!

$("#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" />