How can I find out default placeholder setting

Question

I am creating a drop down menu, that will be next to a box with a placeholder within it. I would like both of the text within the boxes to appear the same. I would like to know, how do I find out the default properties from the text box, so that I may use those properties in my drop down menu?

<input type="text" placeholder="Gray Default">

<select>
  <option>Black Default
  </option>
</select>

I want the style of both boxes to appear the same. I just don't know how to find the exact default settings

I can use css, but I can't match the properties exactly, without knowing what they are. I do not know what font is used, the size, or exact color. Is there some resources I could use to find out what these properties are? — Robert Crenshaw, Jul 17 '15 at 04:46
@RobertCrenshaw The placeholder text is gray, the dropdown text is black. Do you want to make them both black? — Abraar Arique Diganto, Jul 17 '15 at 04:53
Yeah, the color is "gray" by default. To change this you can check out the link: https://css-tricks.com/snippets/css/style-placeholder-text/ — LearningDeveloper, Jul 17 '15 at 04:54

score 1 · Accepted Answer · edited May 23 '17 at 11:44

To check default browser styles you can use window.getComputedStyle(). Unfortunately, each browser uses its own pseudoclass/pseudoelement name for placeholders:

WebKit and Blink (Safari, Google Chrome, Opera 15+) are using a pseudo-element: ::-webkit-input-placeholder.

Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).

Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.

Internet Explorer 10 is using a pseudo-class: :-ms-input-placeholder.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

(taken from this great answer)

Example code

I used this code to discover that on my Firefox placeholder has black color and opacity of 0.54.

var firstInput = document.getElementsByTagName('input')[0],
    placeholderStyles = window.getComputedStyle(firstInput, '::-moz-placeholder');
console.log('Color: ' + placeholderStyles.getPropertyValue('color'));
console.log('Opacity: ' + placeholderStyles.getPropertyValue('opacity'));

<input type="text" placeholder="blah, blah">

Kishan · Answer 2 · 2015-07-17T08:55:24.970

0

Try this

select {
  color:  rgb(0,0,0);
  opacity:0.54;

}

<input type="text" placeholder="Gray Default" >

<select>
  <option>Changed to Gray
  </option>
</select>

edited Jul 17 '15 at 08:55

answered Jul 17 '15 at 05:43

Kishan

1,182
12
26

That is purple, not the default gray – Robert Crenshaw Jul 17 '15 at 05:46
How do I check the color of the placeholder like you just did is my questions? – Robert Crenshaw Jul 17 '15 at 06:45
try colorzila addon in google chrome https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?utm_source=chrome-ntp-icon – Kishan Jul 17 '15 at 06:58

How can I find out default placeholder setting

2 Answers2

Example code