我们可以仅使用CSS更改HTML5
占位符的文本内容吗?
我尝试使用,content : ''
但似乎没有帮助。
<input type="text" class="zip" placeholder="Enter Zip" />
input{
&:placeholder{
content:'Search by name'
}
}
您可以在基于 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;
}
请注意,其中有两个:before
s,显示了两种方法,一种是\A
在 CSS 中使用的换行符,还有一个括号:before
,:after
如果您感兴趣的话。您可以同意,:after
如果您\A
使用:before
.
注意,如果你有一个它无法识别的伪选择器,浏览器会吓坏,所以如果你决定包含其他的,你应该在它自己的块中做每个供应商。此外,您会看到缺少-input-
( -moz
Firefox) 伪元素。那是因为 (ta-da)textarea
也得到了placeholder
治疗。至少 Chrome (IE?) 也将其应用于textarea
s. 为什么-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 似乎与我们眼皮底下可能正在发生的事情很相似:textarea
input[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 代码中。另一个惊喜。
无论如何,祝你好运。
仅使用 CSS 不可能从字面上做到这一点。您的尝试也有点偏离,placeholder
不是元素而是属性,并且该content
属性仅与:before
和:after
属性一起使用,input
不支持。(你的拼写也有错误placehodler
)
最好的方法是在标记中更改它,或者如果不可能,使用 javascript:
yourElementSelector.placeholder = 'Search by name';
不,你能想象使用 CSS 改变字段的值吗?
你所期待的,和这个一样。你应该使用javascript。