佔位符文字

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/

不e裏面有兩個:before，顯示了兩種方法，一種是\A換行符，它可以在CSS中工作，如果您有興趣，也可以使用括號內的:before和:after。正如你可以同意，如果你使用\A和:before，:after不是很有用。

請注意，如果您有一個它不能識別的僞選擇器，瀏覽器就會嚇壞了，所以如果您決定包含其他選擇器，您應該在每個供應商的塊中進行操作。另外，你會看到在-moz（Firefox）僞元素上缺少-input-。這是因爲（ta-da）textarea也得到了placeholder治療。至少Chrome（IE？）也適用於textarea s。爲什麼-input-在那裏，誰知道。

就是這樣。我不知道這是如何使用的，但我懷疑它可能是最好的另一種方式。如果您只關心webkit瀏覽器，那麼您就很好。否則，也許有一天...其餘的只是過度。

---

火狐

您可以在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 S，:link，visited，:focused，以及更多有用的CSS3僞選擇，如:nth-child，:selected，:checked等

這::-moz-placeholder是一個僞元素，它不遵守的狀態或一個元素的狀態，它代表一個元素。 A 僞元素。我們到哪裏去，你可能會想。

從它看起來似乎，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; 
} 

And：

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; 
} 

所以你去。在您使用的所有textarea和input[type=text]元素中嵌入了一個「匿名」（div）。下面是一些XUL似乎plausibly similar什麼是可能會在正確的在我們的眼皮底下：

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> 

不幸的是，以何種方式火狐涉及這個「匿名」的僞元素組意味着你可能無法像在Chrome中那樣操縱placeholder的文本。

剛纔我發現了包含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的企業，在此（或一般），試試這個，如果你在進入很有趣更實際的鍍鉻HTML和CSS文件：

資源：// GRE資源/

你可以閱讀更多的::-webkit-input-placeholder or ::-moz-placeholder in this question。請注意，這種特定類型的選擇器（僞元素,不僞類 ...至少最近 ...）在樣式表中使用它們的方式有些脆弱。

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

唷。從來沒有想過這個鷸狩獵會結束。希望能幫助別人。我學到了一些東西，比如input[type=text]元素上的上下文菜單是硬編碼的帶有元素標記定義的XUL代碼。另一個驚喜。不管怎樣，祝你好運。

Answer 2

只使用CSS是不可能的。您的嘗試也有點偏離，placeholder不是一個元素，而是一個屬性，content屬性僅用於:before和:after屬性，而input不支持。 （你也有一個錯誤的拼寫placehodler）

最好的辦法是改變它的標記，或者如果這是不可能的，使用javascript：

yourElementSelector.placeholder = 'Search by name'; 

Answer 3

號你能想象改變使用CSS的字段值？

你的期望是什麼，與此相同。你應該使用JavaScript。