Referencing html tag attribute in css [duplicate]

Try this

textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
textarea::-moz-placeholder { /* Firefox 19+ */
 color: pink;
}
textarea:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
textarea:-moz-placeholder { /* Firefox 18- */
  color: pink;
}
textarea::placeholder { /* Default, admitido por la mayoría de navegadores modernos */
  color: pink;
}

I refer to this interesting article published in CSS Tricks , where your case is analyzed thoroughly :

The pseudo-element ::placeholder (or a pseudo class, in some cases, depending on the browser implementation) allows you to apply a style to the placeholder text of a form element.

You can apply style to that text in most browsers with this selection of selectors with a provider prefix:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}

::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}

<textarea placeholder="tu comentario"></textarea>

Like any psuedo, you can include specific elements as necessary, for example in case you want different colors depending on the type of element, class, etc:

textarea.red::-webkit-input-placeholder {
  color: red;
}

<textarea id="normal" placeholder="tu comentario"></textarea>
<textarea class="red" placeholder="esto irá en rojo"></textarea>