HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計

如何處理 HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計是必要的技巧,因為傳統的 HTML textarea 預設的邊框視覺效果比較單調,難以與比較有質感的網頁設計做搭配,以往用 HTML 也的確比較難設計出好看的 textarea 邊框,不過現在有 CSS 就方便許多,網頁設計師可以很輕鬆的透過 CSS 內建的 border 屬性來設計出好看的 textarea 邊框,包含邊框顏色與邊框樣式。

幾個必會的技巧語法

Point1、HTML textarea 文字輸入欄位語法(詳細:表單文字輸入欄位 textarea
<textarea name="欄位名稱" style="欄位樣式">欄位內容</textarea>
Point2、CSS border 邊框設計語法(詳細:CSS border 邊框設計
border: 邊框粗細 邊框顏色 邊框樣式;
以上兩個重要語法請確實熟悉,只要把 CSSborder 屬性套用到 HTML textarea 就可以隨心所欲的修改多行文字輸入欄位的邊框顏色與樣式,我們會在範例中多呈現幾個不同效果給各位讀者參考。

HTML textarea 表單多行文字輸入欄位的邊框顏色與樣式設計範例
<textarea name="欄位名稱" style="border:1px gray solid;">欄位內容</textarea>
<textarea name="欄位名稱" style="border:2px red dashed;">欄位內容</textarea>
<textarea name="欄位名稱" style="border:3px blue double;">欄位內容</textarea>
範例的實際視覺效果
我們在範例中總共準備了三個不同的 textarea 多行文字輸入欄位,並透過 CSSborder 屬性分別替它們設計出不同的邊框效果,由左而右分別是灰色的細邊框、紅色的虛線邊框以及最右邊的藍色雙十線邊框,是不是把原本單調的 textarea 邊框用較活潑的視覺效果呈現出來了呢?這個技巧非常好用,你可以在《CSS border-style 邊框樣式設計》篇中找到更多邊框樣式。

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