HTML textarea 文字輸入欄位的邊框樣式與邊框顏色

HTML textarea 文字輸入欄位的邊框樣式與邊框顏色在預設的情況下，往往並不是很優美，雖然許多的瀏覽器會自己美化 textarea 的邊框樣式，不過不一定能呈現最完美的效果，許多設計師為了讓 textarea 符合整個網頁設計的風格，會特別針對 textarea 做一些美化工作，其中最簡單的兩個項目就包含＂邊框樣式＂以及＂邊框顏色＂修改，這兩個項目都可以透過 css 來修改。

修改 HTML textarea 文字輸入欄位的邊框樣式與邊框顏色範例清單

多提供幾種不同的修改風格給各位參考

範例一、橘色虛線邊框（粗細為 3px）

<textarea style="border:3px orange dashed;">
這裡是 textarea 的內容
</textarea>

呈現結果

在 textarea 的開頭標籤內使用 style 宣告樣式是 css 的標準規則，我們用了 css 的邊框設計屬性 border，優點是可以直接設計 textarea 的邊框粗細、顏色以及樣式，以範例中「border:3px orange dashed」這樣的寫法來說，代表的意思是邊框粗細為 3px、顏色為橘色（orange）、邊框樣式為虛線（dashed），呈現的結果就可以看到美化過的 textarea 邊框囉！

範例二、綠色實線邊框（粗細為 2px）

<textarea style="border:2px green solid;">
這裡是 textarea 的內容
</textarea>

呈現結果

範例二只是把範例一個邊框粗細由 3px 改為 2px，顏色由橘色（orange）改為綠色（green），樣式改為實線（solid），這些項目都可以自己修改，以下這兩個主題的內容相當實用。

數百種顏色的十六進位色碼：色碼表。
常用的 css 邊框樣式參考：CSS border-style 邊框樣式。
調整邊框的寬度：CSS border-width 邊框寬度。

以上三篇看完應該能對於 textarea 的邊框顏色與樣式修改有基本的實力。

範例三、藍色雙實線邊框（粗細為 2px）

<textarea style="border:3px blue double;">
這裡是 textarea 的內容
</textarea>

呈現結果

特別把雙實線的邊框拿出來做範例，因為在表單中常常會用到這種效果，我們把邊框的粗細改為 3px、顏色改為 blue、重點是把樣式改為雙實線（double）就能呈現這樣的效果，這裡要稍微注意的是邊框粗細盡量不要用太小，例如 1px 或 2px 就不是很理想，因為雙實線會重覆或黏在一起而失去效果。

以上是幾個 HTML textarea 的邊框樣式與邊框顏色設計範例，還有更多不同的風格可以自己搭配，範例二中的那幾個主題多看看，會比較有心得，最重要的是自己要多多練習。

延伸閱讀