WEBTECH 網頁設計教學站
HTML textarea 表單多行文字輸入欄位背景顏色設計
HTML textarea 表單多行文字輸入欄位預設的背景顏色是白色,無論網頁本身的背景顏色是什麼顏色,HTML textarea 的背景顏色都會是白色,在Google Chrome、FireFox、IE、Opera 等著名瀏覽器裡都是同樣的基本設定,但我們不能永遠都是用白色背景的 textarea,為了配合網頁整體的風格,網頁設計師往往必須給 textarea 不同的背景顏色,在這裡我們使用 CSSbackground-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 多行文字輸入欄位,我們利用 CSSbackground-color 屬性分別設定了銀色(silver)、橘色(orange)以及淺綠色(#C9FFC9)的背景顏色,前面兩個都是用顏色的英文名稱,這部份應該沒什麼問題,有趣的是第三個淺綠色所使用的是十六進位的色碼,各位可以由 Wibibi 所提供的《色碼表》找到更多顏色來套用。

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

更多 HTML textarea 設計技巧

連絡我們