Question

无法找到输入元素的默认占位符样式。任何css文件中都没有任何webkit-input-placeholder，-moz-placeholder，-moz-placeholder或-ms-input-placeholder样式设置。

更新：伙计们，不要急于评判我。我有遗留代码（css文件的音调）。 IE 11中没有正确显示一个占位符样式（字体粗细，颜色等）。我开始找到定义占位符样式的位置。而且我没有找到你们提到的任何占位符风格声明所以我假设浏览器中有占位符的默认样式。

Answer 1

可以在此处找到Webkit的用户代理样式表（Chrome和Safari）：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

他们的CSS显示：

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

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

我找不到其他浏览器的默认值，但我想他们会接近这个。

Answer 2

要为占位符添加样式，您应使用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;
}

你甚至可以确定元素的范围，

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

请参阅此回答Different place holder implementations and usage

Answer 3

请参考PlaceHolder的样式......

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

例如

/* 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 4

很多浏览器都支持占位符样式，看这里：http://caniuse.com/#feat=input-placeholder

示例 -

风格：

<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">

Plunker上的工作代码：https://plnkr.co/edit/bpTg4zIQfGD580XKo7q8?p=preview

在哪里可以找到输入占位符样式

4 个答案: