What do to change color of placehold with Javascript

Question

<input type="type" placeholder="Enter...">

What do to change color of placehold with Javascript.

Answer 1

You can use the ::placeholder CSS selector to set the color (and other CSS properties of an element's placeholder).

.redPlaceholder::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: red;
    opacity: 1; /* Firefox */
}

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

.redPlaceholder::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}

<input type="type" class="redPlaceholder" placeholder="Enter...">

To change the placeholder's color with Javascript, you can add a class to the input with Javascript that sets the color of the placeholder.

.redPlaceholder::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: red;
        opacity: 1; /* Firefox */
    }

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

    .redPlaceholder::-ms-input-placeholder { /* Microsoft Edge */
        color: red;
    }

<input type="text" class="" placeholder="Enter.."/>
<p/>
<button onClick="changeColor()">Change Placeholder Color</button>
<script>
var input = document.querySelector('input');
function changeColor(){
  if(input.classList.contains("redPlaceholder")){
    input.classList.remove("redPlaceholder");
  } else {
    input.classList.add("redPlaceholder");
  }
}
</script>