將輸入欄位設定為分割輸入
有多種方法可用於建立一系列分割輸入欄位。一種方法利用「字母間距」來分隔單一輸入欄位內的字元。此外,「background-image」和「border-bottom」樣式可以進一步增強多個輸入欄位的錯覺。
CSS 片段
以下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 實現
要使用此CSS,只需將以下HTML 程式碼新增至您的頁面:
<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>
以上是如何將單一輸入欄位設定為分區輸入?的詳細內容。更多資訊請關注PHP中文網其他相關文章!