從Youbue 的CSS頻道學到的表單效果。
在文字輸入時,標籤文字會自動往上移動,沒輸入時也會自動歸位。
當文字輸入完畢後,會停留在上方,完全只用到CSS功能,不需Java Script就能辦到的效果。
實際展示
See the Pen Input Label Slide Up on Hover by Letitia.li (@letitia_li) on CodePen.
以下是CSS標籤備註:
box-shadow:產生陰影效果或光暈效果的特性
- 標準語法 box-shadow: x y blur spread color inset;
box-sizing: border-box; 這個元素的內距和邊框將不會增加元素本身的寬度。
pointer-events: none; 讓滑鼠穿牆,直接點選到下層的區塊。
建議用法
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
使用 -webkit- 和 -moz- 前綴(Prefixes),才能啟用特定瀏覽器實驗中的 CSS 特性。該屬性從 IE8+ 之後就開始支援。