HTML textarea 文字輸入欄位背景顏色

HTML textarea 文字輸入欄位背景顏色預設值其實是沒有顏色的,換句話說,如果網頁背景顏色是白色,那 textarea 的背景顏色看起來就會是白色,如果網頁背景顏色是其他顏色,則 textarea 的背景顏色也跟著改變,既然這是預設的效果,當然就有給設計師修改的空間,只要透過 css 的 background-color 屬性即可修改 textarea 文字欄位的背景顏色,幾乎所有主流的瀏覽器都支援。

修改 HTML textarea 文字欄位的幾個範例、使用 css background-color
<textarea style="background-color:#FFF0D4;">這是 #FFF0D4 背景顏色</textarea>
<textarea style="background-color:#C9FFC9;">這是 #FFF0D4 背景顏色</textarea>
<textarea style="background-color:#C9FFFF;">這是 #FFF0D4 背景顏色</textarea>
呈現結果
  
以上 background-color 所使用的背景顏色取自:色碼表

這裡共準備了三個範例,差別僅在於顏色的色碼不同,所呈現出來的背景顏色當然也就不一樣,重點在開頭的 textarea 標籤內,使用了 style 宣告要使用 css 樣式來修改 textarea,接著在 style 內使用了 background-color 屬性,完成最後的結果,這是 css 的標準做法,若您對於文字欄位的基本語法或 css 的背景顏色屬性不了解,可以先參考這兩篇的內容。
變更背景顏色算是美化 textarea 比較簡單的方式之一,設計師可以根據網頁的配色或風格,輕鬆的搭配出比較適合的 textarea 背景顏色,如果還要再更進一步的提升質感,也可以直接修改 textarea 的背景圖片,參考此篇:HTML textarea 文字輸入欄位背景圖片

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012