純 css 實作類似Google表單浮動表單標題

Google表單通常都會有一種很酷表單標題效果，點到input時候原本在placeholder的標題就跑到左上角變成文字了，並且原本input的外框線也要斷開放進label。

看圖比較懂：

快速作法就是把label的背景設定成跟整個表單整體的背景顏色一致，這樣就定位focus的時候位移到上方就好。

但是！！如果背景是一張圖或是漸層呢？label的背景顏色就不能只是固定的單色了。

這時候我們就要做到真正的透明label。

---

來看看真正的透明label效果：

就算背景是一張圖、漸層顏色都一樣可以運作喔！

首先要先介紹我們用到的兩個html標籤：fieldset、legend

這兩個東西搭配在一起，就基本上能做到我們要的斷開框線，顯示透明label這件事。

<fieldset>
  <legend>浮動的標題Label</legend>
</fieldset>

如果只是這樣，那本篇結束ＸＤ（掰掰～

但是不只是這樣的！這只是結果，我們需要的是「動態」

所以我們會有兩種狀態：

1. label在正中間：input沒有值，或者我們沒有focus在input上的時候。
2. label在上面：input有值，或者我們正準備要打字的時候。

初始狀態有很多外觀的css可以先忽略，注重在//keypoint下方的樣式就好：

<fieldset>
  <input value="" required />
  <legend>浮動的標題Label</legend>
</fieldset>

html {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
  background: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

fieldset {
  border: 1px solid #fff;
  border-radius: 6px;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
  padding: 0 10px;

  //key point
  position: relative;
  height: 60px;
}
legend {
  color: rgba(#fff, 0.7);
  font-size: 18px;
  padding: 0 10px;
  transition: top 0.2s;

  //keypoint
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1em;
  height: 0;
  margin-top: -0.5em;
}
input {
  border: 0;
  padding: 10px 0;
  font-size: 18px;
  outline: none;
  background-color: transparent;
  color: #fff;
  width: calc(100% - 40px);
  left: 0;
  margin: 0 20px;

  //keypoint
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

這樣我們就先把label定位到正中間了。

接下來要如何用 css 知道現在input裡面有沒有值呢？

首先可以看一下html裡的input我多放了一個required屬性。

<input value="" required />

加了這個屬性後，css選擇器的:invalid和:valid就會生效，並且代表你下的校驗條件的兩種狀態，因為我的條件是required（必填），所以只要沒輸入文字就成立:invalid，有輸入文字就成立:valid。

現在是要針對有文字的，所以我們使用:valid，以及正要打字的:focus：

我們在html中故意把lable放到input後面，這樣在css中我們就可以使用+來選擇到label。

input{
//... 初始樣式


 &:valid + legend,
 &:focus + legend {
   position: relative
   top: -0.5em;
   transform: none;
 }
}

這樣就可以看到真正透明的表單label拉～

Codepan：https://codepen.io/jess0210777/pen/xxLOxPq