如何更改 Div 中占位符的颜色？

Question

I am a bit stuck to change the color of the Placeholder in div. I am using VueJs to bind placeholder with my div element. Here is the front-end :

VueJs Code :

<div class="new-message-input form-control" id="plc" contenteditable :data-placeholder="$t('chat.type_a_message')" :placeholder="$t('chat.type_a_message')" ref="newMessageInput" @keydown="isTyping" @keydown.enter="enterPressedEvt(postMessage, $event)">

Css Code :

#plc::placeholder { 
  color: white;
}

Answer 1

 #plc{ padding: 10px; background-color: orange; } [contentEditable=true]:empty:not(:focus):before{ content:attr(data-text); color: white; }

 <div id="plc" contentEditable=true data-text="Type a message..."></div>