HTML input type text 文字欄位的背景顏色與背景圖片設計

前面的篇幅我們介紹了關於 input type text 文字欄位的文字顏色修改、邊框顏色、邊框樣式等修改技巧，這一篇將進入修改 input type text 文字欄位的背景顏色以及背景圖片修改技巧，要用到的是 CSS background 的兩個屬性，分別是 background-color 及 background-image。

修改 HTML input type text 文字欄位的背景顏色

範例輸出

透過 css 的 background-color 製作出三個不同背景顏色的文字輸入欄位，background-color:pink 是粉紅色背景，往又依序為黃色以及淺綠色，這些背景顏色可以透過色碼表來挑選，更詳細的背景顏色設計技巧請參閱：CSS background-color 背景顏色。

修改 HTML input type text 文字欄位的背景圖片

範例輸出

修改文字欄位的背景圖片就不是光修改背景顏色這麼簡單，為了讓圖片能夠與欄位的尺寸完美契合，所以要先將欄位的寬度與高度固定下來，以此範例來說，寬度設定為 300px（width:300px;）、高度設定為 30px（height:30px），準備用來當背景的圖片規格也是一樣。透過 css 的 background-image 即可將背景圖片加入至文字欄位，更詳細的用法請參閱：CSS background-image 背景圖片。

延伸閱讀