Bootstrap 中用於OTP 驗證的單獨輸入欄位
在使用者介面領域,為一次性密碼(OTP)建立單獨的輸入欄位)經常會帶來造型方面的挑戰。不必依賴多個互不相連的文字框,而是可以使用樣式選項來實現視覺上有凝聚力的分區效果。
要複製提供的圖像中看到的分區文字框,您可以利用以下CSS 屬性:
<code class="css">#partitioned { padding-left: 15px; // Adjust character spacing 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>
這些屬性有效地創建了單個文本框中分隔輸入字段的錯覺。隨著字元間距的增加,輸入字元看起來明顯分開。線性漸變和背景設定可作為微妙的視覺分隔線,進一步增強分區的錯覺。
在程式碼中實現此樣式技術可以讓您:
以上是如何在 Bootstrap 中為 OTP 身份驗證建立單獨的輸入欄位?的詳細內容。更多資訊請關注PHP中文網其他相關文章!