築夢角落

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

【html】用table自訂input輸入框樣式,加入圖示與按鈕

最後更新時間 : 2022-08-30 | viewed : 70

 

上次,我們在【html】用css在input輸入框左邊或右邊加入圖示使用 position 及 padding,在 input 輸入框的左右兩邊加入了 icon 及 button。

這次我們換個作法,嘗試用 table 來達成一樣的效果。

基本思路是先建構一個 table,加入三個欄位,並分別在三個欄位中置入 icon、input、button

使用 table 的好處是,table 跟 td 具有一定的約束力,可以保證各元件之間的相對位置不變,維持版型,並自動適配所有大小的螢幕

在這個範例中,如果將 input 的 width 調大,icon 跟 button 也會自動調整到適當的位置,不會像上個範例一樣牽一髮動全身。

此外,也可以依需求替換元素,例如將單純的 +886 文字改成下拉選單。

開發過程中,如果想更清楚地觀察 table 跟 td 的狀態,可以在這兩個元素上加入 border,如此便能直覺地調整版型。

 

有任何問題歡迎留言~

希望有幫助到你!

 

 
我要留言!
 

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