Get the correct placeholder color with JS

Question

I changed the default placeholder color for my input to blue. Why do I get a black placeholder color with Javascript?

const getPlaceholderColor = () => {
  let inputEl = document.querySelector('.myClass');
  let inputElStyle = window.getComputedStyle(inputEl, '::placeholder');
  
  let resultTarget = document.getElementById('colorResult');
  let placeholderColor = inputElStyle.getPropertyValue('color');
  resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}

.myClass::placeholder {
  color: #004085;
}

.marginTop20 {
  margin-top: 20px;
}

<input
  type="text"
  placeholder="Enter name"
  class="myClass"
/>

<button onClick="getPlaceholderColor()">Get placeholder color</button>

<div class="marginTop20" id="colorResult"></div>

Tove

It works fine on Firefox 56, Windows 7. What browser are you using? – Pigtail

It works in firefox 61.0.1 though. Not in Chrome 69.0.3497.92 – Interfuse

Answer 1

The problem is written about here => https://css-tricks.com/almanac/selectors/p/placeholder/

Below is a codepen that uses :placeholder-shown and ::placeholder

https://codepen.io/kipomaha/pen/pOOdQr

document.getElementById("myStyles").sheet.insertRule('.myClass:placeholder-shown { color: red; }');
document.getElementById("myStyles").sheet.insertRule('.myClass::placeholder { color: red; }');
const getPlaceholderColor = () => {
    let inputEl = document.querySelector('.myClass');
    let inputElStyle = window.getComputedStyle(inputEl, ':placeholder-shown');
    let resultTarget = document.getElementById('colorResult');
    let placeholderColor = inputElStyle.getPropertyValue('color');

    resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}


document.getElementById("myStyles").sheet.insertRule('.myClass:placeholder-shown { color: red; }');
document.getElementById("myStyles").sheet.insertRule('.myClass::placeholder { color: red; }');

var inputEl = document.querySelector('.myClass'); 
var placeholderColor = inputElStyle.getPropertyValue('color');
const getPlaceholderColor = () => {
    let inputElStyle = window.getComputedStyle(inputEl, ':placeholder-shown');
    let resultTarget = document.getElementById('colorResult');

    resultTarget.innerHTML = `Placeholder color: ${placeholderColor}`;
}

Tumid

I believe if you use the correct psuedo class and psuedo event styles in the external sheet it should work, I have not tested this out, but I also didn't read about any bugs regarding external sheets and getComputedStyle() with this particular :placeholder-shown or ::placeholder properties. – Tumid

This should only work for the placeholder when the placeholder is currently being used within the input element. That's how I read the css-tricks article. When it isn't active then it should have the value of the input's default color which if you haven't assigned it should be black. – Tumid

This is only a recommendation but maybe you can store the value being used so that you have access to it later. – Tumid

I made an adjustment to the example :/ – Tumid

So that the placeholder value gets retrieved during script execution instead of every time the input is being used. – Tumid

Yeah, if the value attribute is specified it is going to override the placeholder styling because that is telling the css that it should not be using the placeholder event style. It's confusing on Chrome, I have nothing for that sorry, except to maybe use javascript to fill the value after you set the variable for the placeholder color. – Tumid