Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

最近在整理手上專案時,發現一些有趣的小設計,這是我當時蠻喜歡的表單呈現方式,當表單元件成為焦點時,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.

歡迎給我點鼓勵,讓我知道你來過 :)

36
Subscribe
Notify of
guest

0 則留言
Inline Feedbacks
View all comments