占位符文本 [英] Placeholder Text

问题描述

我们是否可以仅使用 CSS 更改 HTML5 占位符的文字内容？

Can we change the text content of a HTML5 placeholder using only CSS ?

我尝试使用内容：''但似乎没有帮助。

I tried using the content : '' but it does not seem to help.

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

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

推荐答案

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

You can use the following pseudo-elements (note the terminology) in webkit-based, Firefox and IE browsers of later vintage:

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

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

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

与此相关的特定功能一个属性似乎在不断发展，所以这个答案最终可能会过时。毕竟这些都是以供应商为前缀的。

This particular "functionality" associated with this one attribute seems to be evolving, so this answer may eventually become dated. These are vendor-prefixed, after all.

我在基于webkit的浏览器中找到了什么，你可以将这个属性视为伪元素（更多信息如下），您可以使用操作它的CSS 内容：在和<$之前c $ c>：之后出现你已经改变了占位符。对于Firefox，至少现在，这是不可能的（也更晚些）。使用IE9（我测试的唯一版本），它似乎无法正常工作。

What I did find is in webkit-based browsers, you can treat this attribute as a pseudo-element (more below on that), to the point you can manipulate it's CSS content with :before and :after in such a way that it appears you've changed the placeholder. With Firefox, at least right now, that's not possible (also more later). With IE9 (the only version I tested), it did not appear to work.

以下仅适用于Chrome：

The following works only in 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/

注意有两个：之前 s在那里，显示两种方法，一种是使用 \A 换行符在CSS中工作，还有一个括号：之前和：在之后如果您有兴趣。如您所知，如果您使用 \A 并使用<$，那么：在之后不是非常有用c $ c>：在之前。

Note there's two :befores in there, showing two methods, one with the \A newline which works in CSS, and also a bracketed :before and :after if you're interested. As you can agree, the :after isn't very useful if you've used \A with :before.

注意，如果你有一个它无法识别的伪选择器，浏览器就会惊慌失措，所以如果你决定包括其他人，你应该在它自己的块中做每个供应商。此外，您将在 -moz （Firefox）伪元素上看到缺少 -input - 。那是因为（ta-da） textarea 还获得占位符处理。至少Chrome（IE？）也适用于 textarea 。为什么 -input - 在那里，谁知道。

Note, browsers freak out if you have a pseudo-selector it doesn't recognize, so if you decide to include the others, you should do each vendor's in it's own block. In addition, you'll see the lack of -input- on the -moz (Firefox) pseudo-element. That's because (ta-da) textarea's also get the placeholder treatment. And at least Chrome (IE?) does also apply this to textareas. Why -input- is in there, who knows.

就是这样。我不知道这是如何使用的，但我怀疑它可能是最好的另一种方式。如果您关注webkit浏览器，那就很好。否则，也许有一天...剩下的只是过剩。

That's it. I don't know how this is intended to be used, but I suspect it's probably best done another way. If webkit browsers are all you care about, you're good. Otherwise, maybe one day... The rest is just excessive.

Firefox

你可以在Firefox中 从视图中删除占位符：

You can "remove from view" the placeholder fairly easily in Firefox:

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

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

You get the idea. ::-moz-placeholder was :-moz-placeholder until recently, which it was given the new selector moniker. Let's take a closer look.

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

一个：按惯例表示这引用了所选元素的 state 。您的悬停 s，：链接，已访问，：focus ，以及更有用的CSS3伪选择器，例如：nth-​​child ， ：已选择，：已选中等。

One : indicates by convention that this references a state of the selected element. Your hovers, :link, visited, :focused, as well as the more useful CSS3 pseudo-selectors such as :nth-child, :selected, :checked, etc.

此 :: - moz-placeholder 作为伪元素，它不是观察元素的状态或条件，它代表一个元素。 伪元素。我们在哪里，你可能会想到。

This ::-moz-placeholder being a pseudo-element, it's not observing a state or condition of an element, it's representing an element. A pseudo element. Where are we headed with this, you might be thinking.

从它看来，输入是不是它的样子。例如：

From what it appears to be, an input is not what it appears to be. For instance:

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

您可以访问的内容通过Firefox的地址栏使用：

Which you can access through Firefox's address bar using:

资源：//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;
}

我确定你已经注意到了输入:: - moz-placeholder （？）和 textarea 是也是乐趣的一部分。但是你注意到这个吗？

I'm sure you've noticed the input::-moz-placeholder (?) and the textarea is also part of the fun. But did you notice this?

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

.anonymous-div ？那是什么呀？无论是什么，选择器都会指示它在 input / textarea 元素内。真的吗？

.anonymous-div? What the heck is that? Whatever it is, the selector indicates it's within the input/textarea element. Really?

后来，不寻常的事实出现了：

Later, the unusual truth comes out:

 /*
  * 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 和输入中嵌入了匿名（ div ）[type = text ] 您使用的元素。这里有一些XUL似乎似乎有点类似于我们鼻子下可能发生的事情：

So there you go. There's an "anonymous" (div) embedded within all textarea and input[type=text] elements you work with. Here's some XUL that seems plausibly similar to what is probably going on right under our noses:

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中一样操纵占位符的文字。

Unfortunately, the manner in which Firefox deals with this "anonymous" gang of pseudo-elements means you probably won't be able to manipulate the placeholder's text like we did in Chrome.

刚才我找到了包含输入和占位符的XUL / XBL标记机制/定义。这是：

And just now I found the XUL/XBL markup that includes the input and placeholder mechanism/definition. Here it is:

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

它处理占位符交换。以下显示在 .anonymous-div 中，它似乎与核心中的一些代码交换出来。我将免除那些血腥的细节。

Which handles the placeholder swapping. The following shows in the .anonymous-div, which appears to get swapped out with some code from the core. I'll spare you those gory details.

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

我发现的最后两个街区：

These last two blocks I found within:

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

如果您有兴趣在此（或一般）进入Firefox的业务，请试试这个如果你有兴趣了解更多实际的chrome HTML和CSS文件：

If you're interested in getting into Firefox's business on this (or in general), try this if you're interesting in getting into more of the actual chrome HTML and CSS files:

resource：// gre-resources /

您可以在 :: - webkit-input-placeholder 或 :: - moz-placeholder 在这个问题。请注意，这种特殊类型的选择器（伪元素，非伪类 ......至少最近 ...）有些脆弱在你在样式表中使用它们的方式。

You can read more on ::-webkit-input-placeholder or ::-moz-placeholder in this question. Take note that this particular type of selector (pseudo-element, not pseudo class... at least lately...) is somewhat brittle in the way you approach using them in stylesheets.

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

Phew。从来没有想过这次狙击会结束。希望能帮到别人。我学习了一些东西，比如上的上下文菜单[type = text] 元素硬编码到具有元素标记定义的XUL代码中。另一个惊喜。

Phew. Never thought this snipe hunt was going to end. Hope that helps somebody. I learned some things, like the context menu over the input[type=text] elements is hardcoded into the XUL code with the element markup definition. Another surprise.

无论如何，祝你好运。

这篇关于占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！