MUKI AI Summary
分享一種表單樣式，當表單元件聚焦時，label 標籤會上移，失去焦點後返回原位。此樣式需設置 `placeholder=""`，避免刪除值時 label 不回到原位。可應用於 input 和 textarea。
若需要自動填入帳密，可使用 `autocomplete` 屬性，設置 `username` 和 `current-password`。也提供 CodePen 範例供參考。...
最近在整理手上專案時，發現一些有趣的小設計，這是我當時蠻喜歡的表單呈現方式，當表單元件成為焦點時，label 標籤會往上滑動，離開焦點後會回到原位。記得前陣子很流行這個樣式，如果現在有吸引到你的話，可以參考看看我的寫法 XD。
實作分享
<div class="flex w-[30rem] flex-col">
<div class="relative mb-5">
<input type="text" class="w-full form--item" placeholder=" " />
<label class="label">登入帳號</label>
</div>
<div class="relative mb-5">
<input type="password" class="w-full form--item" placeholder=" " />
<label class="label">登入密碼</label>
</div>
</div>.label {
position: absolute;
left: 1rem;
top: 20px;
transition: all .2s ease;
}
.form--item {
background: rgb(38, 38, 38);
padding: 1.75rem 1rem .75rem;
&:focus {
background: rgb(64, 64, 64);
border-bottom: 2px solid #D9444A;
outline-width: 0;
}
}
input:focus + label, input:not(:placeholder-shown) + label,
textarea:focus + label, textarea:not(:placeholder-shown) + label {
top: 5px;
font-size: 13px;
color: #D9444A;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
-webkit-text-fill-color: rgb(163, 163, 163);
-webkit-box-shadow: 0 0 0px 500px #262626 inset;
transition: background-color 5000s ease-in-out 0s;
}▼ 特別注意的是，需要設定 placeholder=""，不然在預設有帶值的情況下，刪除值時 Label 不會回到原本的位置。
另外除了 input 外，也能用在 textarea 上唷。
自動帶入帳密
▼ 如果要把這個功能放在登入頁面，並要讓使用者自動記憶帳密的話，可以把表單改為如下寫法
<!-- 多了 autocomplete 欄位 --> <input type="text" class="w-full form--item" placeholder=" " autocomplete="username" /> <input type="password" name="password" class="w-full form--item" placeholder=" " autocomplete="current-password" />
▼ 以下是使用 autocomplete 時，可以填入的值，給大家參考。
| 代表意義 | autocomplete 值 | 使用時機 |
|---|---|---|
| 使用者帳號 | username | 顯示使用者記憶的登入帳號 |
| 當前密碼 | current-password | 顯示使用者記憶的登入密碼 |
| 新密碼 | new-password | 修改密碼後，顯示新的密碼 |
| 認證碼 | one-time-code | 簡訊的認證碼 |
CodePen 範例
▼ 以下是 codepen 範例
See the Pen Input Label Style Demo by MUKi (@mukiwu) on CodePen.
歡迎給我點鼓勵，讓我知道你來過 ：）
37