譯者:果凍cc
原文地址: callmenick.com/dev/floated…
在這篇文章中,咱們將使用:placeholder-shown僞類建立一個浮動的問題標籤效果,使用純CSS實現。css
當咱們處理輸入框時,會千方百計提供給用戶更好的體驗。有兩個標籤屬性是咱們常常會用到的:瀏覽器
這兩個標籤屬性能夠組合起來建立「浮動文字標籤」的效果,這種效果具體指的是:字體
註冊focus事件,判斷是否輸入有值,隱藏一個元素,並根據輸入框是否有內容來決定是否顯示這個元素。這聽起來像是JavaScript的工做,對嗎?並非的!由於有一個CSS僞類:placeholder-shown能夠實現上述的效果。MDN中是這樣解釋這個僞類的:spa
:placeholder-shown CSS 僞類 在 <input> 或 <textarea> 元素顯示 placeholder text
時生效。
換句話說,若是輸入框中有任何值,咱們均可以認爲:placeholder-shown僞類不會被觸發。scala
下面是我使用這個僞類來實現浮動標籤的思路:3d
下面就按照上面的思路來完成HTML與CSS。code
HTML的結構實際上很是簡單,就像這樣:orm
<div class="Input">
<input type="text" id="input" class="Input-text" placeholder="Your first name, e.g. Nicholas">
<label for="input" class="Input-label">First name</label>
</div>複製代碼
CSS代碼:cdn
.Input {
/** * 容器的相對定位很重要, 由於label元素的浮動位置是相對於它計算的 */
position: relative;
}
.Input-text {
/** * 設置輸入框的樣式。 字體大小和行高對於肯定標籤的精肯定位很是重要 */
display: block;
margin: 0;
width: 100%;
/** * 這些屬性在示例中會經過自定義屬性的方式一次性設置: * * padding * font-size * line-height */
}
.Input-text:focus {
/** * 輸入框獲取焦點時的樣式 */
}
.Input-label {
/** * label元素設置爲絕對定位,並根據父元素和輸入框計算出它的位置與移動距離 */
display: block;
position: absolute;
opacity: 0;
/** * 這些屬性在示例中會經過自定義屬性的方式一次性設置: * * bottom * left * font-size * line-height * transform * transform-origin * transition */
}
.Input-text:placeholder-shown + .Input-label {
/** * 當佔位文字可見時,會隱藏label */
visibility: hidden;
z-index: -1;
}
.Input-text:not(:placeholder-shown) + .Input-label,
.Input-text:focus:not(:placeholder-shown) + .Input-label {
/** * 當佔位文字消失後,例如當輸入內容時,label元素會顯示並浮動在輸入框的上面 */
visibility: visible;
z-index: 1;
opacity: 1;
/** * 這些屬性在示例中會經過自定義屬性的方式一次性設置 * * transform * transition */
}複製代碼
完整的HTML和CSS代碼你能夠在下面的演示連接中看到:blog
到目前爲止,瀏覽器支持度還不錯,除了Edge。
我但願你經過這篇文章學到了一些東西,你還能夠想出一些使用:placeholder僞類有趣的新方法。再次感謝您的閱讀!