【html】用css在input輸入框左邊或右邊加入圖示
最後更新時間 : 2022-08-25 | viewed : 3430
有時候,我們會想自訂 input 輸入框的樣式,但是重寫一個 <input> 元件不是一件簡單的事,光是一個密碼輸入框的功能,可能就得花上相當多的時間,在安全性等方面也未必能做得完善。
有鑑於此,直接使用 html 的 <input> 相對而言比較明智。
而事實上,只要簡單運用幾行 CSS,就能達到不錯的效果,可以隨心所欲改變 <input> 的外觀,或是在想要的位置上加入圖示、按鈕。
下面展示了幾種常見的輸入框樣式。
這個範例只使用了 position 跟 padding。
position 用來設定圖示或按鈕出現的位置,padding 用來設定文字與圖示的間距。
這種做法的優點是簡單快速,但缺點就是當圖示或按鈕的 width 有所變化時,padding也需要一起調整。
如果想要約束力強一點的做法,可以使用 <table>,將圖示、輸入框、按鈕都放進 <td> 裡。
詳細可以參考用table自訂input輸入框樣式,加入圖示與按鈕。
希望有幫助到你!
我要留言!