How to find out colour of placeholder? [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I know how to set colour of placeholder, but what if I need to find out what's colour of placeholder on some page? I cannot find this property with Chrome Devtools. ColorZilla doesn't help either.

Answer 1

It seems you can't access the pseudo placeholder attribute's CSS in DevTools. You can only get the text value using getAttribute('placeholder') in JavaScript.
However, it is possible to view the style properties using JavaScript instead of manually finding them in the CSS files. This is not ideal, but I created a general purpose function that allows you to specify the selector (or part of the selector), and the attribute you are looking for, and it will loop through all the stylesheets and log a table to the console.
function getSelectorStyle(selector, attribute) {
var rules = [];
function CSSRule(sheet, selector, value) {
this.sheet = sheet;
this.selector = selector;
this.value = value;
}
var styleSheets = document.styleSheets;
for (var i = 0; i < styleSheets.length; i++) {
var currentSheet = document.styleSheets[i];
if (currentSheet != null) {
var ruleList = currentSheet.cssRules;
if (ruleList != null) {
for (var j = 0; j < ruleList.length; j++) {
var currentRule = ruleList[j];
if (currentRule.selectorText != null) {
if (currentRule.selectorText.indexOf(selector) != -1) {
var sheetLocation = currentSheet.href ? currentSheet.href : "inline-css";
var item = new CSSRule(sheetLocation, currentRule.selectorText, currentRule.style[attribute]);
rules.push(item);
}
}
}
}
}
}
console.table(rules)
}
getSelectorStyle("placeholder", "color");
Update:
In terms of your problem with the colour not matching with the Amazon site, as per the comments below, it appears that the selector .form-control::-webkit-input-placeholder is not applied. The input field isn't contained in form-control. The default placeholder colour is applied instead, which is #A9A9A9 (in Chrome at least), which is what you are seeing.