html - 占位符文本

Question

我们可以仅使用CSS更改HTML5 占位符的文本内容吗？

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

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

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

score 6 · Accepted Answer

您可以在基于 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 的浏览器中，您可以将此属性视为伪元素（更多内容见下文），以至于您可以使用它来操作它的 CSS ，并且看起来content您:before已经:after更改了. 使用 Firefox，至少现在是不可能的（以后也会更多）。使用 IE9（我测试过的唯一版本），它似乎不起作用。placeholder

以下仅适用于 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，显示了两种方法，一种是\A在 CSS 中使用的换行符，还有一个括号:before，:after如果您感兴趣的话。您可以同意，:after如果您\A使用:before.

注意，如果你有一个它无法识别的伪选择器，浏览器会吓坏，所以如果你决定包含其他的，你应该在它自己的块中做每个供应商。此外，您会看到缺少-input-( -mozFirefox) 伪元素。那是因为 (ta-da)textarea也得到了placeholder治疗。至少 Chrome (IE?) 也将其应用于textareas. 为什么-input-在里面，谁知道呢。

而已。我不知道它打算如何使用，但我怀疑它可能最好以另一种方式完成。如果您只关心 webkit 浏览器，那就太好了。否则，也许有一天……剩下的只是多余的。

火狐

您可以placeholder在 Firefox 中相当轻松地“从视图中删除” ：

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

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

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

一个:按照惯例表示这引用了选定元素的状态。您hover的 s, :link, visited, :focused, 以及更有用的 CSS3 伪选择器，例如:nth-child, :selected,:checked等。

这::-moz-placeholder是一个伪元素，它不是观察元素的状态或条件，而是表示一个元素。一个伪元素。我们将走向何方，你可能会想。

从它看起来的样子来看，aninput不是它看起来的样子。例如：

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

所以你去。在您使用的所有元素中div嵌入了一个“匿名”( )。这里有一些 XUL 似乎与我们眼皮底下可能正在发生的事情很相似：textareainput[type=text]

许尔

<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 处理这种“匿名”伪元素的方式意味着您可能无法placeholder像我们在 Chrome 中那样操作 's 文本。

刚才我找到了包含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-资源/

::-webkit-input-placeholder您可以在此问题上或::-moz-placeholder在此问题中阅读更多信息。请注意，这种特殊类型的选择器（伪元素，不是伪类......至少最近......）在样式表中使用它们的方式有些脆弱。

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

呸。没想到这场狙击狩猎会结束。希望对某人有所帮助。我学到了一些东西，比如input[type=text]元素上的上下文菜单被硬编码到带有元素标记定义的 XUL 代码中。另一个惊喜。

无论如何，祝你好运。

score 2 · Accepted Answer

仅使用 CSS 不可能从字面上做到这一点。您的尝试也有点偏离，placeholder不是元素而是属性，并且该content属性仅与:before和:after属性一起使用，input不支持。（你的拼写也有错误placehodler）

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

yourElementSelector.placeholder = 'Search by name';

score -1 · Accepted Answer

不，你能想象使用 CSS 改变字段的值吗？

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

html - 占位符文本

3 回答 3

Related

Reference