Input Label Slide Up on Hover (表單)

  • 220
  • 0
  • CSS
  • 2019-06-18

從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+ 之後就開始支援。