如何設計具有視覺吸引力且實用的 OTP 輸入欄位？

對輸入欄位進行分區以實現最佳視覺化

在Web 開發領域，設計人員經常遇到以視覺化方式呈現使用者輸入字段的挑戰有吸引力且實用的方式。其中一個場景涉及建立一個指定空間來輸入四位一次性密碼 (OTP)。雖然可以使用多個單獨的輸入元素來實現此目的，但這可能不是最有效的方法。

幸運的是，有一種結合風格和實用性的替代方案：將單一輸入欄位劃分為視覺上獨特的部分。這可以透過仔細調整 CSS 屬性（特別是字元間距和邊框樣式）來完成。

透過擴大字元間距，OTP 欄位中的各個字元可以分開，產生多個欄位的錯覺。此外，將底部邊框設定為透明和不透明部分交替的漸變會產生分隔線的效果。

為了說明此技術，請考慮以下CSS 程式碼：

<code class="css">#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline : none;
}</code>

在HTML 中，只需使用ID 為「partitioned」的輸入元素：

<code class="html"><input id="partitioned" type="text" maxlength="4"></code>

利用此技術可以實現更優雅、更有凝聚力的OTP 輸入字段，為用戶提供一種方便直觀的方式來輸入驗證碼。

以上是如何設計具有視覺吸引力且實用的 OTP 輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！