Is there a way to change the color of an HTML5 textbox watermark?

Question

If I have an HTML5 text box as follows

<form>
    <input type="text" name="mytextbox" placeholder"MyTextBox"/>
</form>

is there a way using HTML or CSS to change the color of the placeholder/watermark from the default light gray?

This may help! http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — tastydew, Jul 22 '15 at 16:29

score 3 · Accepted Answer · edited May 23 '17 at 11:44

See this answer.

Long story short, you need to use CSS Selectors to apply the rules to each browser, which handles the process differently.

input.mytextbox::-webkit-input-placeholder {
  /* WebKit browsers */
  color: red;
}

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

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

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

<input class="mytextbox" type="text" name="mytextbox" placeholder="MyTextBox"/>

Is there a way to change the color of an HTML5 textbox watermark?

1 Answers1