築夢角落

致力於用最生活化的例子讓所有人都能懂程式,也喜歡分享動漫、小說心得,以及自己的所見所聞、所思所想。

【html】用css在input輸入框左邊或右邊加入圖示

最後更新時間 : 2022-08-25 | viewed : 98

 

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

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

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

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

 

 

這個範例只使用了 positionpadding

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

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

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

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

 

希望有幫助到你!

 

 
我要留言!
 

X
暱稱(選填)
email(選填,僅站長可見。)
留言 To:#