2

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

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

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

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

3 回答 3

6

您可以在基于 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 文本。

刚才我找到了包含inputplaceholder机制/定义的 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 代码中。另一个惊喜。

无论如何,祝你好运。

于 2013-03-09T23:23:24.457 回答
2

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

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

yourElementSelector.placeholder = 'Search by name';
于 2013-03-09T18:09:42.573 回答
-1

不,你能想象使用 CSS 改变字段的值吗?

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

于 2013-03-09T18:09:55.297 回答