在僅包含CSS的輸入字段中佔位符文本（無JavaScript）

而不是標記表單中的每個字段，有時在每個字段中都有佔位符文本（從設計角度來看）是優選的。例如，而不是這樣的：在僅包含CSS的輸入字段中佔位符文本（無JavaScript）

   ---------------------------------- 
Full Name: |         | 
      ----------------------------------

你有這樣的：

---------------------------------- 
| Full Name      | 
----------------------------------

的，當你在野外單擊，文字消失，你可以寫任何你想要的。如果您在未輸入任何文本的情況下跳過該字段，則會重新出現佔位符。

我已經看到這樣做有很多方法，但所有方法都涉及JavaScript。例如，Twitter在他們的signup page上做了一個體面的工作，但是如果Javascript被禁用，你最終會在「全名」這個詞上輸入你的名字。

我正在尋找一種即使JavaScript禁用也能正常工作的CSS方法。我想出的唯一潛在解決方案是將<input>標記的背景設置爲所需文本的圖像，然後使用僞類在有人單擊文本框時清除背景圖像。這似乎工作，但不必使用圖像很好。

有沒有人知道如何做到這一點的好資源？

來源

2012-07-06 David Jones

如果你解釋佔位符屬性做什麼對於那些不靈通這將是很好。就像我在一分鐘前。我不認爲舊的CSS（預HTML5/CSS3時代）可以做到這一點...... – TheZ 2012-07-06 23:52:16

我認爲你正在將CSS推進到它不能執行你所期望的任務的領域。有'* before'和':: after'僞元素的* *可能性，但是它們對'input'元素不可靠，任何實現了僞元素的瀏覽器也會實現'placeholder'屬性。 – 2012-07-06 23:52:18

通過「佔位符」，我認爲他指的是顯示示例文本的文本框（例如：「您的姓名在這裏」），直到用戶選擇它。 – username 2012-07-06 23:57:31

這是首選的方法，在目前所有的瀏覽器上運行：

<input type="text" name="" placeholder="Full Name"/>

該版本適用於IE9和之前：

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/>

來源

2012-12-01 15:01:17 Jay

+15

我可能會在這裏丟失一些明顯的東西，但即使在用戶輸入值後，第二個版本的值是否也會將值設置爲「全名」？ – Chris 2013-06-12 11:00:38

是的，它會 - 那裏需要有一個條件語句表示它將只會恢復到'全名'，如果模糊值是'value =''' – 2014-11-03 16:54:42

OP問是否可以在CSS中做。 – 2016-05-18 05:22:49

您可以使用z-index放置在索引後面的<label>和<input>上的透明background-color執行此操作。使用:focus更改爲白色背景。

:first-line有一些Firefox問題。

演示：http://jsfiddle.net/ThinkingStiff/bvJ43/

注：見下面的代碼壽司的評論對模糊的問題：Placeholder text in an input field with CSS only (no JavaScript)

輸出：

enter image description here

HTML：

<label class="input">enter name<input /><label>

CSS：

.input { 
    color: gray; 
    display: block; 
    font-size: small; 
    padding-top: 3px; 
    position: relative; 
    text-indent: 5px; 
} 

input { 
    background-color: transparent; 
    left: 0; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
} 

input:focus, input:first-line { 
    background-color: white; 
}

來源

2012-07-07 00:08:22 ThinkingStiff

這感覺真的很接近。如果我們想出一種方法來允許輸入比佔位符短的情況，那麼這將是完美的...... – 2012-07-07 04:25:49

@danielfaraday我認爲在幾乎所有情況下，數據都會比佔位符長。保持佔位符字體小，標籤簡短，你可能很好。你可以多玩一些''第一線'，但我無法得到任何東西使它佔用整個'輸入'。 – ThinkingStiff 2012-07-07 04:33:57

@Knu：你可以發佈你的代碼嗎？您之前的鏈接對我來說看起來一樣（佔位符文本出現在模糊處）。 – 2012-07-07 11:31:02

嘗試this：它解決了四溢的佔位符和多輸入病例。訣竅是將標籤移動到輸入後面並對其進行可視化重新排序。

你不需要額外的div來實現你想要的。

來源

2012-07-07 00:24:54 Knu

不錯！但它遭受同樣的問題。當你在那裏放置一些文字並模糊時，佔位符顯示出來。 – ThinkingStiff 2012-07-07 00:29:43

@ThinkingStiff這是一個與鍵盤導航場景相關的邊緣情況。 – Knu 2012-07-07 00:40:46

@Kun Edge案例？無論何時您輸入一些文字，然後讓輸入移動到下一個文字，您的佔位符將覆蓋您剛輸入的文字。這是一個主要的用例。 +1爲''的想法。 – ThinkingStiff 2012-07-07 00:43:55

試試這個：

HTML

<div> 
    <input type="text" id="text"></input> 
    <label for="text">required</label> 
</div>

CSS

.text-wrapper { 
    position: relative; 
} 
.text-input-label { 
    position: absolute; 
    /* left and right properties are based on margin, border, outline and padding of the input text field */ 
    left: 5px; 
    top: 3px; 
    color: #D1D1D1; 
} 
#text:focus + label { 
    display: none; 
}

Working Fiddle

來源

2013-11-11 05:34:48

仍然沒有布宜諾斯 - 模糊你可以看到標籤。你需要爲'input：valid'設置一個類來停止顯示標籤。 – 2014-11-03 17:01:19

所有可能CSS-唯一的答案以上都忽視了這是爲了防止作爲來自「出血僞佔位符標籤所需的重要組成部分通過「一旦用戶不再關注該特定領域。

提示：

input:valid { background-color:white; }

僞類:valid獲得每當場具有比''以外的任何值。所以當你的用戶在他或她自己的領域輸入任何東西時，顯示在那裏的標籤將停止顯示。

建議使用<input type="email" />字段，僞類:valid確實需要輸入有效的電子郵件格式（例如「[email protected]」 - 或.net或.org等）。

完整說明如何在這裏做到這一點：http://css-tricks.com/float-labels-css/

來源

2014-10-31 19:07:25

在僅包含CSS的輸入字段中佔位符文本（無JavaScript）

回答

相關問題