本文講的是利用 :placeholder-shown 選擇器實現 label 浮動效果，

設計師似乎喜歡用?浮動 label 模式?來設計華麗的效果，雖然我不確定我是否百分百喜歡這種方式，但我忍不住快速實現了一個這樣的 demo。這個版本用上了一些我最近才看見的現代 CSS 表單樣式技巧，特別是?:placeholder-shown?選擇器。

先說重點：不管從形狀或者形式上，這都不是一種最佳實踐。這個 demo 的實現適用于某些瀏覽器的較新版本 - 尤其是 Chrome/Opera 和 Safari/WebKit。但它在 Firefox 上運行得一塌糊涂。要注意了，我可幾乎沒有測試過它。

我主要是參考了下面這些技巧來實現該效果的：

Flexbox — 借助?Hugo Giraudel 的示例代碼?，在 HTML 中，把 label 放在了 input 之后，并通過 CSS 顛倒其顯示順序。

使用?transform?屬性，把 label 移至 input 之上。當 input 處于激活狀態的時候，placeholder 的文字被設置為?opacity: 0，也就是透明，這樣 label 和 placeholder 的文本不會重疊。

當 placeholder?不?顯示，比如表單域被填充或者獲得焦點的時候，才把 label 上移，這里我是受到了?Jeremy 關于 ”Pseudon’t” 的文章?啟發。

最后一點正是將我這個實現與?Chris Coyier?和?Jonathan Snook?的示例區分開來的地方，后兩者均使用了?:valid?偽類。我認爲我這個 demo 背后有特定的局限性，但正如我一開始所講，對于瀏覽器支持總是會有限制的。

譯注：:placeholder-shown?屬于尚未發行的 CSS4 規范，查詢?Can I Use?可以得知，迄今為止只有 Chrome (>=47)、Safari (>=9)、Opera (>=35)、Android Browser (>=47) 和 Chrome for Android (>=47) 這五種瀏覽器支持?:placeholder-shown?偽類。作者在這里提及的局限性應該就是指瀏覽器對?:placeholder-shown?的支持度。

這個版本改用了?:placeholder-shown?偽類，但不僅僅是在 placeholder 文本不顯示時移動 label 的位置 - 在該模型預設的工作方式中?:placeholder-shown?偽類發揮著很好的作用。

這里是相關 HTML 代碼：

<div class="field"><input type="text" placeholder="Jane Appleseed"><label for="fullname">Name</label> </div>

...以及 CSS 代碼：

/** * 把區域設置為 flex 容器，并逆序排列，使得 label 標簽顯示在上方 */ .field {display: flex;flex-flow: column-reverse; } /** * 給 label 和 input 設置一個過渡屬性 */ label, input {transition: all 0.2s; }input {font-size: 1.5em;border: 0;border-bottom: 1px solid #ccc; } /** * 設置 input 獲得焦點時的邊框樣式 */ input:focus {outline: 0;border-bottom: 1px solid #666; } /** * 1\. 標簽應保持在一行內，并最多占據字段 2/3 的長度，以確保其比例合適且不會出現換行。 * 2\. 修正光標形狀，使用戶知道這里可以輸入. * 3\. 把標簽往下平移并放大1.5倍，使其覆蓋 placeholder 層. */ label {/* [1] */max-width: 66.66%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/* |2] */cursor: text;/* [3 */transform-origin: left bottom; transform: translate(0, 2.125rem) scale(1.5); } /** * 默認情況下，placeholder 應該是透明的，并且應該繼承 transition 屬性。 */ ::-webkit-input-placeholder {transition: inherit;opacity: 0; } /** * 在 input 獲得焦點時，顯示 placeholder 內容。 */ input:focus::-webkit-input-placeholder {opacity: 1; } /** * 1\. 當元素獲取焦點時，還原 transform 效果，把 label 移回原來的位置。 * 并且，當 placeholder 不顯示，比如用戶已經輸入了內容時，也作同樣處理。 * 2\. ...并把光標設置為指針形狀。 */ input:not(:placeholder-shown) + label, input:focus + label {transform: translate(0, 0) scale(1); /* [1] */cursor: pointer; /* [2] */ }

2016-01-26 更新: 我更新了 label 的選擇器，以便其對應的 input 標簽擁有 :placeholder-shown 偽類時，才使用 label 的 transform 效果。那樣的話，不支持的瀏覽器就回退到 “正常模式” ，也就是標簽顯示在 input 上方。

原文發布時間為：2016年04月20日
本文來自云棲社區合作伙伴掘金，了解相關信息可以關注掘金網站。

總結

以上是生活随笔為你收集整理的利用 :placeholder-shown 选择器实现 label 浮动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。