html5 - 占位符文字

我们可以只使用CSS更改HTML5占位符的文本内容吗？
我试过使用content : ''但似乎没有帮助。

<input type="text" class="zip" placeholder="Enter Zip" />

input{
    &:placeholder{
       content:'Search by name'
    }
}

最佳答案

您可以在基于webkit、Firefox和IE浏览器的后期版本中使用以下伪元素（请注意术语）：

// Note two colons, -input-
::-webkit-input-placeholder

// Note two colons, NO -input-
::-moz-placeholder

// Note ONE colon, -input-
:-ms-input-placeholder

与这一属性相关联的这个特殊“功能”似乎正在进化，因此这个答案可能最终会过时。毕竟，这些是以供应商为前缀的。
我发现在基于webkit的浏览器中，您可以将这个属性视为一个伪元素（下面更详细地说），您可以使用content和:before来操作它的CSS:after，这样您就可以更改placeholder。对于Firefox，至少现在是这样，这是不可能的（稍后还会有更多）。对于IE9（我测试过的唯一版本），它似乎不起作用。
以下仅适用于Chrome：
标记

<input type="text" class="before" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/>

CSS

.before::-webkit-input-placeholder:before {
    content: 'Hello \A';
    font-size: 12px;
    color: red;
}
::-webkit-input-placeholder:before {
    content: 'Hello ';
    font-size: 12px;
    color: red;
}
::-webkit-input-placeholder {
    white-space: pre;
    font-size: 5px;
}
::-webkit-input-placeholder:after {
    content: 'World';
    font-size: 12px;
    color: blue;
}

http://jsfiddle.net/LDkjW/
注意这里有两个:befores，显示了两个方法，一个是在CSS中工作的\A换行符，如果您感兴趣的话还有一个括号:before和:after。正如您所同意的，如果您将:after与\A一起使用，则:before不是很有用。
注意，如果你有一个它无法识别的伪选择器，浏览器会抓狂，所以如果你决定包括其他的，你应该在每个供应商自己的块中做。此外，您将看到在-input-（Firefox）伪元素上缺少-moz。那是因为（ta da）textarea也得到了placeholder治疗。至少是铬合金也适用于textareas。为什么-input-在那里，谁知道呢。
就这样。我不知道这是怎么使用的，但我怀疑最好用另一种方法。如果你只关心webkit浏览器，那你就很好。否则，也许有一天。。。剩下的就太多了。
火狐
在Firefox中，您可以很容易地“从视图中删除”placeholder：

::-moz-placeholder {
    font-size: 0;
    left-indent: -1000px;
    font-color: white;
}

你明白了。::-moz-placeholder一直是:-moz-placeholder直到最近，它被赋予了新的选择器名字。让我们仔细看看。

:-moz-placeholder  // Legacy
::-moz-placeholder // As of FF17

一个:按惯例表示它引用所选元素的状态。您的hovers、:link、visited、:focused以及更有用的CSS3伪选择器，如:nth-child、:selected、:checked等。
这是一个伪元素，它没有观察元素的状态或条件，而是表示一个元素。一个伪元素。你可能在想，我们要去哪里。
从表面上看，::-moz-placeholder不是表面上的。例如：
http://dxr.mozilla.org/mozilla-central/layout/style/forms.css.html
您可以通过Firefox的地址栏使用：
资源：//gre resources/forms.css
我们发现如下情况：

input > .anonymous-div,
input::-moz-placeholder {
  word-wrap: normal !important;
  /* Make the line-height equal to the available height */
  line-height: -moz-block-height;
}

以及：

textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder {
  white-space: pre;
  overflow: auto;
   ...
  -moz-text-decoration-color: inherit;
  -moz-text-decoration-style: inherit;
  display: inline-block;
  ime-mode: inherit;
  resize: inherit;
}
textarea > .anonymous-div.wrap,
input > .anonymous-div.wrap {
  white-space: pre-wrap;
}
textarea > .anonymous-div.inherit-overflow,
input > .anonymous-div.inherit-overflow {
  overflow: inherit;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  /*
   * Changing display to inline can leads to broken behaviour and will assert.
   */
  display: inline-block !important;
  /*
   * Changing resize would display a broken behaviour and will assert.
   */
  resize: none !important;
  overflow: hidden !important;
  /*
   * The placeholder should be ignored by pointer otherwise, we might have some
   * unexpected behavior like the resize handle not being selectable.
   */
  pointer-events: none !important;
  opacity: 0.54;
}

我相信你已经注意到了而且input也是乐趣的一部分。但你注意到了吗？

textarea > .anonymous-div,
input > .anonymous-div,

input::-moz-placeholder？那是什么鬼东西？不管它是什么，选择器都表示它在textarea元素中。真的？
后来，不寻常的事实出来了：

 /*
  * Make form controls inherit 'unicode-bidi' transparently as required by
  *  their various anonymous descendants and pseudo-elements:
  *
  * <textarea> and <input type="text">:
  *  inherit into the XULScroll frame with class 'anonymous-div' which is a
  *  child of the text control.
  *
  * Buttons (either <button>, <input type="submit">, <input type="button">
  *          or <input type="reset">)
  *  inherit into the ':-moz-button-content' pseudo-element.
  *
  * <select>:
  *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
  *  the <optgroup>'s ':before' pseudo-element, which is where the label of
  *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
  *  so they need no special rules.
  */
textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder,
*|*::-moz-button-content,
*|*::-moz-display-comboboxcontrol-frame,
optgroup:before {
  unicode-bidi: inherit;
  text-overflow: inherit;
}

那就这样。在您使用的所有.anonymous-div和input/textarea元素中都嵌入了一个“匿名”（div）。下面是一些似乎在我们眼皮底下发生的事情的XUL：
徐尔

<box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>

XBL公司

<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

不幸的是，Firefox处理这组“匿名”伪元素的方式意味着您可能无法像在Chrome中那样操作textarea的文本。
刚才我发现了XUL/XBL标记，其中包含input[type=text]和placeholder机制/定义。这里是：

  <property name="label" onset="this.setAttribute('label', val); return val;"
                         onget="return this.getAttribute('label') ||
                                        (this.labelElement ? this.labelElement.value :
                                         this.placeholder);"/>
  <property name="placeholder" onset="this.inputField.placeholder = val; return val;"
                               onget="return this.inputField.placeholder;"/>
  <property name="emptyText" onset="this.placeholder = val; return val;"
                             onget="return this.placeholder;"/>

它处理input交换。下面显示在placeholder中，它似乎与来自核心的一些代码交换了出来。我就不提那些血淋淋的细节了。

  <binding id="input-box">
    <content context="_child">
      <children/>
      ...
    </content>

我发现的最后两个街区是：

jar:file:///C:/path/to/a/FirefoxPortable/App/firefox/omni.ja!/chrome/toolkit/content/global/bindings/textbox.xml

如果你有兴趣进入Firefox的业务（或者一般来说），如果你有兴趣进入更多的chrome HTML和CSS文件，可以试试这个：
资源：//gre资源/
您可以在plausibly similar上阅读更多内容。请注意，这种特定类型的选择器（伪元素，而不是伪类。。。至少最近……）在样式表中使用它们的方式有些脆弱。
placeholder or .anonymous-div in this question
啊。没想到这次猎鹬会结束。希望能帮上忙。我学到了一些东西，比如::-webkit-input-placeholder元素上的上下文菜单是用元素标记定义硬编码到XUL代码中的。又一个惊喜。
不管怎样，祝你好运。

关于html5 - 占位符文字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15314090/