占位符文本

Question

我们能否仅使用HTML5 占位符的文本内容更改CSS？

我试过使用content : ''，但它似乎没有帮助。

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

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

Answer 1

您可以在以后年份的基于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的浏览器中，您可以将该属性视为一个伪元素(更多介绍)，您可以使用:before和:after来操作它的CSS :before和: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/

注意，这里有两个:before，显示了两个方法，一个方法使用CSS中的\A换行符，如果您感兴趣的话，还有一个括号内的:before和:after。正如您所同意的，如果您在:after中使用了\A，那么:before就不是很有用了。

注意，如果你有一个伪选择器不被识别的话，浏览器就会抓狂，所以如果你决定包括其他的，你应该在它自己的块中做每个供应商的选择。此外，您还将看到-input-在-moz (火狐)伪元素上的缺乏。这是因为(ta-da) textarea也得到了placeholder待遇。至少Chrome (IE?)也适用于textareas。为什么-input-会出现在那里，谁知道呢？

就这样。我不知道这是如何使用，但我怀疑这可能是最好的办法。如果webkit浏览器是您所关心的，那么您就很好。否则也许有一天..。剩下的只是过度了。

火狐

在火狐中，您可以很容易地“从视图中删除”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是一个伪元素，它不是观察一个元素的状态或条件，而是表示一个元素。一个伪元素。你可能会想，我们这是要去哪里。

从表面上看，input并不是它看上去的那样。例如：

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::-moz-placeholder (?)textarea也是乐趣的一部分。但你注意到了吗

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

.anonymous-div？那是什么玩意？不管是什么，选择器都表示它在input/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;
}

那你就去吧。在您使用的所有textarea和input[type=text]元素中都嵌入了一个“匿名”(匿名)(匿名)。下面是一些看起来像是似似的XUL，它可能就在我们的眼皮底下：

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>

不幸的是，火狐处理这群“匿名”伪元素的方式意味着你可能无法像我们在Chrome中那样操纵placeholder的文本。

刚才我发现了包含input和placeholder机制/定义的XUL/XBL标记。下面是：

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

它处理placeholder交换。下面显示在.anonymous-div中，它似乎是用核心的一些代码交换出来的。我不会再给你那些血淋淋的细节了。

  <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-资源/

您可以在在这个问题上上阅读更多内容。请注意，这种特定类型的选择器(伪元素，而不是伪类).至少最近.在样式表中使用它们的方式有些脆弱。

http://dxr.mozilla.org/mozilla-central/layout/style/forms.css.html

呼。从没想过猎杀狙击手的行动会结束。希望这能帮到别人。我学到了一些东西，比如input[type=text]元素上的上下文菜单被硬编码到带有元素标记定义的XUL代码中。又一个惊喜。

不管怎样，祝你好运。

Answer 2

仅仅使用CSS是不可能做到这一点的字面。您的尝试也有点错误，placeholder不是一个元素，而是一个属性，content属性仅用于:before和:after属性，而input不支持这些属性。(此外，您的拼写placehodler也有错误)

最好的方法是在标记中更改它，或者如果不可能的话，使用javascript：

yourElementSelector.placeholder = 'Search by name';

Answer 3

不是的。您能想象使用CSS更改字段的值吗？

你所期望的和这个一样。你应该使用javascript。