Как обновить цвет заполнителя, используя Javascript?

Я ищу в Интернете, и я ничего не нашел. Я пытаюсь обновить цвет заполнителя текстового поля с помощью JavaScript, но как я могу это сделать? У меня есть палитра цветов, и цвет меняется.

Если у меня есть что-то подобное в моем CSS, как я могу его обновить?

::placeholder {
  color: red;
}
<input placeholder="placeholder" />

Ответы

Ответ 1

Используйте переменные CSS. Вы также можете настроить таргетинг только на нужный элемент

function update() {
  document.querySelector('input[type=text]').style.setProperty("--c", "blue");
}
::placeholder {
  color: var(--c, red);
}
<input type="text" placeholder="I will be blue">
<input type="number" placeholder="I will remain red">
<button onclick="update()">change</button>

Ответ 2

Как указано в других ответах, вы не можете изменять встроенные стили псевдоэлементов. Однако вы можете изменить правило CSS в самом <style>, и вам не нужен браузер, поддерживающий переменные CSS для этого. Получите доступ к таблице стилей и либо получите существующее правило, либо вставьте свое собственное, затем .style с его объявлениями стилей, как если бы вы использовали элемент .style:

const {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" });
const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style;
placeholderStyle.color = "red";

Object.assign(document.body.appendChild(document.createElement("input")), {
  type: "button", value: "Color!", onclick() {
    placeholderStyle.color = "#"+Math.round(Math.random()*0xFFF).toString(16).padStart("0",3);
}});
<input placeholder="placeholder" />