Comment puis-je mettre à jour dynamiquement la couleur de l'espace réservé avec des variables CSS en JavaScript ?

Updating Placeholder Color with CSS Variables in Javascript

JavaScript lacks a direct method for modifying placeholder color. However, CSS variables can be utilized to achieve this effect.

HTML Code:

<input type="text" placeholder="Placeholder" />
<button onclick="update()">Change Placeholder Color</button>

CSS Code:

::placeholder {
  color: var(--placeholder-color, red);
}

Javascript Code:

function update() {
  const placeholderColor = document.querySelector('#color-picker').value;
  const input = document.querySelector('input[type=text]');

  input.style.setProperty("--placeholder-color", placeholderColor);
}

In this script, the update() function retrieves the selected color from a color picker element and sets the value of the CSS variable --placeholder-color in the text input element. By referencing this variable in the CSS, the placeholder color is dynamically updated when the button is clicked.

Note:

• Be sure to include a color picker element in your HTML to enable users to select the new placeholder color.
• Using this technique, you can target specific placeholders by assigning unique CSS class names to the respective input elements.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!