HTML textarea 文字輸入欄位的文字大小與文字顏色

HTML textarea 文字輸入欄位的文字大小與文字顏色都是可以修改的項目，繼上一篇《HTML textarea 文字輸入欄位的邊框樣式與邊框顏色》後，本篇將告訴您如何透過 css 的 font-size 以及 color 屬性來修改 textarea 內的文字大小以及顏色，讓整個 textarea 在網頁表單中有更好的呈現效果，為了能講解得更清楚，同樣會提供幾個不同的範例讓各位參考，範例內容也會提供相關的參考主題。

HTML textarea 文字輸入欄位的文字大小與文字顏色範例

各範例的差異在於 font-size 及 color 這兩個 css 屬性設定不同。

範例一、尺寸為 13px 的藍色文字

<textarea style="font-size:13px;color:blue;">
尺寸為 13px 的藍色文字
</textarea>

呈現結果

重點在於開頭 textarea 的標籤內使用的 style 樣式（藍色標註區），font-size:13px 是要顯示大小為 13px 的文字、color:blue 是要顯示藍色的文字顏色，這兩個 css 屬性都是使用率非常高的屬性，建議花點時間研究以下這兩篇。

css 修改文字大小的標準做法：CSS font-size 文字大小。
css 修改文字顏色的標準做法：CSS color 文字顏色。

熟悉以上兩篇就可以繼續看下面的範例，甚至自己都寫得出不錯的作品。

範例二、尺寸為 15px 的綠色文字

<textarea style="font-size:15px;color:green;">
尺寸為 15px 的綠色文字
</textarea>

呈現結果

範例二是把範例一的 font-size 由本來的 13px 加大至 15px，同時 color 由本來的藍色（blue）改為綠色（green），看完範例一所提供的兩篇詳細介紹，應該對範例二非常了解。

範例三、尺寸 20px 的紅色文字

<textarea style="font-size:20px;color:red;">
尺寸 20px 的紅色文字
</textarea>

呈現結果

範例三延續範例二，把 textarea 內的文字再度拉大至 20px，文字顏色則改為紅色（red），基本的觀念與上面兩個範例是一樣的，這裡再提供一個色碼查詢的頁面，讓您輕鬆修改更多不同的文字顏色。

數百種顏色的十六進位色碼：色碼表。

看到這裡應該對於 textarea 文字輸入欄位內的文字大小與顏色修改有一定的認識，接著我們打算要修改文字的樣式，也就是文字字型，讓 textarea 內的文字更加漂亮，會用到 css 的 font-family 技巧，請閱讀這篇：用 css font-family 修改 textarea 內的文字字型。

延伸閱讀