How to change the colour of placeholder using javascript?

Question

I want to change the colour of this placeholder after calling mobileValidate().

<input type="text" class="form-control" name="InputMobile" id="Mobile"    placeholder="Enter Mobile Number" onblur="mobileValidate()"required>

JavaScript function is

function mobileValidate(){

    var x = document.getElementById("Mobile");

        if ((x.value).match(re)){
            alert("mobile Number is valid");
        }
        else{

            alert("mobile no is not valid");
            x.value="";
            x.placeholder.style.color="red";
        }

}

Answer 1

You can't really modify pseudo-selectors with JavaScript. You'll have to modify an existing a element.

If possible, make a class:

.your-class::-webkit-input-placeholder {
    color: #b2cde0
 }

And add it to the element:

$('input').addClass('your-class');

Or if you want to use pure JS, do this:

x.classList.add('your-class');