Where to find input placeholder style

Question

Couldn't find default placeholder style for input element. There are no any webkit-input-placeholder, -moz-placeholder, -moz-placeholder, or -ms-input-placeholder style settings in any css files.

UPDATE: Guys, don't hurry to judge me. I have the legacy code (tones of css files). The one placeholder style (font-weight, color and so on) is not properly shown in IE 11. I started to find where the placeholder style is defined. And I didn't find any placeholder style declaration you all mentioned.
So I assume there is a default style for placeholder in browser.

The OP isn't asking how to style placeholders, he wants to know what the default browser styles are for placeholders. That's like asking what's the default styles for `html` or `body` or `div` tags. Every browser sets some defaults in the user agent stylesheet. — skyline3000, Jul 18 '16 at 11:07
You can find here https://css-tricks.com/almanac/selectors/p/placeholder/ — Sagar Sadrani, Jul 18 '16 at 11:09
Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) — Shaggy, Jul 18 '16 at 11:20

score 9 · Accepted Answer · answered Jul 18 '16 at 11:46

9

Webkit's User Agent Stylesheet (Chrome & Safari) can be found here: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Their CSS shows:

::placeholder {
  -webkit-text-security: none;
   color: darkGray;
  pointer-events: none !important;
}

input::placeholder, isindex::placeholder {
  white-space: pre;
  word-wrap: normal;
  overflow: hidden;
}

I can't find any other sources that have the defaults for other browsers, but I imagine they would be close to this.

answered Jul 18 '16 at 11:46

skyline3000

7,639
2
24
33

1

As stated in the [MDN](https://developer.mozilla.org/en/docs/Web/CSS/::-moz-placeholder#Browser_compatibility) : "Firefox applies a default style of `opacity: 0.54` to placeholder text." – tektiv Jul 18 '16 at 14:35
1

Nice find, I think it's safe to assume then that Firefox placeholder text uses the default color (black) combined with this opacity to produce grey text. – skyline3000 Jul 18 '16 at 15:28
Yep you can see this by adding `::-moz-placeholder { opacity:1; }` in your CSS (see [example](https://jsfiddle.net/8770moe5/)) – tektiv Jul 18 '16 at 15:38
notably, i believe the pseudo element `::placeholder` is only for newer browsers – oldboy Jul 18 '19 at 22:35

score 0 · Answer 2 · edited May 23 '17 at 10:32

To style the place holders you should use vendor-prefixed selectors

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

You can even scope the elements,

input[type="email"].user_email::-webkit-input-placeholder {
  color: blue;
}

Please refer this answer, Different place holder implementations and usage

score 0 · Answer 3 · answered Jul 18 '16 at 11:06

Please do refer the style for PlaceHolder...

<input    placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>

For Example

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

score 0 · Answer 4 · answered Jul 18 '16 at 11:14

Placeholder styling supported by a lot of browsers, look here: http://caniuse.com/#feat=input-placeholder

Example -

Style:

<style type="text/css">
    input:-ms-input-placeholder {
       color:pink;
       font-style:italic;
       text-transform:uppercase;
       text-align:center;
    }

    input::-webkit-input-placeholder {
       color:pink;
       font-style:italic;
       text-transform:uppercase;
       text-align:center;
    }

    input:-moz-placeholder {
       color:pink;
       font-style:italic;
       text-transform:uppercase;
       text-align:center;
    }

    /* firefox 19+ */
    input::-moz-placeholder {
       color:pink;
       font-style:italic;
       text-transform:uppercase;
       text-align:center;
    }
      </style>

HTML:

      <input type="text" placeholder="Placeholder Text" size="40">

working code on Plunker: https://plnkr.co/edit/bpTg4zIQfGD580XKo7q8?p=preview

Where to find input placeholder style

4 Answers4

Linked

Related