占位符文本

Question

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

我试过使用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的浏览器,你可以把这个属性作为一个伪元素(详见下文上),你可以操纵它的CSS点content带: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/

注意那里有两个:befores,显示了两个方法,一个是\A在CSS中使用换行符,另一个是括号内的:before,:after如果你感兴趣的话.如你所知,:after如果你已经习惯了\A,那就不是很有用了:before.

注意,如果你有一个它无法识别的伪选择器,浏览器就会吓坏,所以如果你决定包含其他的,你应该在它自己的块中做每个供应商.此外,你会看到缺少-input-的上-moz(Firefox)的伪元素.那是因为(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

一个:按惯例表明它引用了所选元素的状态.你的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;
}

你去吧 在您使用的div所有元素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>

不幸的是,Firefox处理这个"匿名"伪元素团伙的方式意味着你可能无法placeholder像在Chrome中那样操纵文本.

刚才我找到了包含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代码中.另一个惊喜.

祝你好运.