HTML textarea 表單多行文字輸入欄位背景顏色設計

HTML textarea 表單多行文字輸入欄位預設的背景顏色是白色，無論網頁本身的背景顏色是什麼顏色，HTML textarea 的背景顏色都會是白色，在Google Chrome、FireFox、IE、Opera 等著名瀏覽器裡都是同樣的基本設定，但我們不能永遠都是用白色背景的 textarea，為了配合網頁整體的風格，網頁設計師往往必須給 textarea 不同的背景顏色，在這裡我們使用 CSS 的 background-color 屬性來賦予 HTML textarea 各種不同的背景顏色，效果還不錯，先來看看基礎語法吧！

基礎語法

HTML textarea 的語法（詳細用法參閱：表單文字輸入欄位 textarea）
<textarea name="欄位名稱" style="欄位顯示樣式設定">欄位文字內容</textarea>
CSS background-color 屬性語法（詳細用法參閱：CSS background-color 背景顏色）
background-color: 背景顏色設定
我們會在範例中把 CSS 的 background-color 屬性套用到 HTML textarea 的語法中，藉此調整文字欄位內的背景顏色。

HTML textarea 表單多行文字輸入欄位背景顏色設計範例
<style type="text/css">
#DIV1{
width:200px;
height:100px;
border:1px #ccc solid;
background-color:silver;
}
#DIV2{
width:200px;
height:100px;
border:1px #ccc solid;
background-color:orange;
}
#DIV3{
width:200px;
height:100px;
border:1px #ccc solid;
background-color:#C9FFC9;
}
</style>
<textarea id="DIV1">這是銀色的背景顏色</textarea>
<textarea id="DIV2">這是橘色的背景顏色</textarea>
<textarea id="DIV3">這是 #C9FFC9 的背景顏色</textarea>
範例呈現的背景顏色效果
範例中總共有三個大小一樣的 textarea 多行文字輸入欄位，我們利用 CSS 的 background-color 屬性分別設定了銀色（silver）、橘色（orange）以及淺綠色（#C9FFC9）的背景顏色，前面兩個都是用顏色的英文名稱，這部份應該沒什麼問題，有趣的是第三個淺綠色所使用的是十六進位的色碼，各位可以由 Wibibi 所提供的《色碼表》找到更多顏色來套用。

以上就是 HTML textarea 表單多行文字輸入欄位背景顏色設計的技巧，有了這樣的技巧，設計出來的 textarea 就不再是一成不變囉！

更多 HTML textarea 設計技巧
© Copyright webtech.tw Since 2010