WEBTECH 網頁設計教學站
HTML textarea 表單多行文字輸入欄位背景圖片設計
HTML textarea 多行文字輸入欄位的背景預設只有白色而沒有圖片,這樣單純的設計適合絕大多數的情況,可是如果網頁本身設計的風格需要在 textarea 的背景增加背景圖片的效果,預設的白色背景就不符合需求,網頁設計師可以利用 CSS 提供的 background-image 屬性來替 HTMLtextarea 多行文字輸入欄位增加適合的背景圖片,提升整體的視覺效果,設計方式很簡單,兩個基礎語法先熟悉。

基礎語法

HTML textarea 的語法(詳細用法參閱:表單文字輸入欄位 textarea
<textarea name="欄位名稱" style="欄位顯示樣式設定">欄位文字內容</textarea>
CSS background-image 屬性語法(詳細用法參閱:CSS background-image 背景圖片
background-color:url(背景圖片網址) ;
我們會在範例中把 CSSbackground-image 屬性套用到 HTML textarea 的語法中,藉此調整文字欄位內的背景圖片。

HTML textarea 表單多行文字輸入欄位背景圖片設計範例
<style type="text/css">
#T1{
width:300px;
height:200px;
border:1px #ccc solid;
}
#T2{
width:300px;
height:200px;
border:1px #ccc solid;
background-image:url('upload/20150704185839.png');
}
</style>
<textarea id="T1">這是無背景圖片的欄位</textarea>
<textarea id="T2">這是有背景圖片的欄位</textarea>

範例的視覺效果
我們在範例中準備了兩個大小一樣的 textarea 欄位做比較,第一個 textarea 是預設的白色背景顏色,第二個 textarea 則使用了桃紅色背景圖片的設定,然後都有文字寫在裡面,背景圖片不會影響到文字,不過盡量不要使用顏色太深或花樣視覺效果太強烈的背景圖片,以免影響到填寫表擔者的視覺負擔,儘管看似好看卻不實用,挑選適合整體網頁風格的 textarea 背景圖片真的很重要。

更多 textarea 設計技巧

連絡我們