如何更改 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>