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 {{1} } content和:before以出现的方式改变了:after。对于Firefox，至少现在，这是不可能的（也更晚些）。使用IE9（我测试的唯一版本），它似乎不起作用。

以下仅适用于Chrome：

<强>标记

placeholder

<强> CSS

<input type="text" class="before" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/>

http://jsfiddle.net/LDkjW/

请注意，其中有两个.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; }，显示了两种方法，一种是:before换行符，可以在CSS中使用，另外还有一个括号内的\A和:before '有兴趣。如您所知，:after如果您将:after与\A一起使用，则效果不大。

注意，如果你有一个它无法识别的伪选择器，浏览器就会吓坏，所以如果你决定包含其他的，你应该在它自己的块中做每个供应商。此外，您会在:before（Firefox）伪元素上看到-input-的缺失。那是因为（ta-da）-moz也得到textarea治疗。至少Chrome（IE？）也适用于placeholder。为什么textarea在那里，谁知道呢。

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

<强>火狐

你可以“从视图中删除”-input-在Firefox中相当容易：

placeholder

你明白了。直到最近，::-moz-placeholder { font-size: 0; left-indent: -1000px; font-color: white; }才::-moz-placeholder，它被赋予了新的选择器名字。让我们仔细看看。

:-moz-placeholder

一个:-moz-placeholder // Legacy ::-moz-placeholder // As of FF17按惯例表明它引用了所选元素的状态。您的:，hover，:link，visited以及更有用的CSS3伪选择器，例如:focused，:nth-child， :selected等等。

这个:checked是伪元素，它不是观察元素的状态或条件，它代表一个元素。伪元素。我们在哪里领导这个，你可能会想。

从它看来，::-moz-placeholder不是它看起来的样子。例如：

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

您可以使用以下方式通过Firefox的地址栏访问：

资源：//gre-resources/forms.css

我们找到类似的东西：

input

和

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）。这里有一些看起来plausibly similar的XUL可能会发生在我们的鼻子底下：

<强> XUL

input[type=text]

<强> XBL

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

不幸的是，Firefox处理这个“匿名”伪元素团伙的方式意味着你可能无法像在Chrome中那样操纵<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>的文本。

刚才我找到了包含placeholder和input机制/定义的XUL / XBL标记。这是：

placeholder

用于处理<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>

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

资源：// GRE-资源/

您可以在::-webkit-input-placeholder or ::-moz-placeholder in this question上阅读更多内容。请注意，这种特殊类型的选择器（伪元素，非伪类 ......至少最近 ...）有些脆弱在你在样式表中使用它们的方式。

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

呼。没想到这次狙击行动即将结束。希望能帮到别人。我学习了一些东西，比如jar:file:///C:/path/to/a/FirefoxPortable/App/firefox/omni.ja!/chrome/toolkit/content/global/bindings/textbox.xml元素上的上下文菜单是硬编码到带有元素标记定义的XUL代码中。另一个惊喜。

无论如何，祝你好运。

Answer 2

仅使用CSS无法按字面意思执行此操作。您的尝试也有点过时，placeholder不是元素，而是属性，content属性仅用于:before和:after属性，input 1}}不支持。（你的拼写错误placehodler）

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

yourElementSelector.placeholder = 'Search by name';

Answer 3

没有。你能想象用CSS改变字段的值吗？

您的期望与此相同。你应该使用javascript。

占位符文本

3 个答案: