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

Question

我有点坚持要更改 div 中占位符的颜色。 我正在使用 VueJs 将占位符与我的 div 元素绑定。 这是前端：

VueJs 代码：

<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)">

代码：

#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>