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

Answer 1

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.

Answer 2

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;
}

Answer 3

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

Answer 4

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