有時候，我們會想自訂 input 輸入框的樣式，但是重寫一個 <input> 元件不是一件簡單的事，光是一個密碼輸入框的功能，可能就得花上相當多的時間，在安全性等方面也未必能做得完善。

有鑑於此，直接使用 html 的 <input> 相對而言比較明智。

而事實上，只要簡單運用幾行 CSS，就能達到不錯的效果，可以隨心所欲改變 <input> 的外觀，或是在想要的位置上加入圖示、按鈕。

下面展示了幾種常見的輸入框樣式。

這個範例只使用了 position 跟 padding。

position 用來設定圖示或按鈕出現的位置，padding 用來設定文字與圖示的間距。

這種做法的優點是簡單快速，但缺點就是當圖示或按鈕的 width 有所變化時，padding也需要一起調整。

如果想要約束力強一點的做法，可以使用 <table>，將圖示、輸入框、按鈕都放進 <td> 裡。

詳細可以參考用table自訂input輸入框樣式，加入圖示與按鈕。

希望有幫助到你！