修改 HTML input type text 文字大小
<input type="text" style="font-size:12px" value="修改文字大小為 12px"><br>
<input type="text" style="font-size:16px" value="修改文字大小為 16px"><br>
<input type="text" style="font-size:20px" value="修改文字大小為 20px">
範例輸出結果<input type="text" style="font-size:16px" value="修改文字大小為 16px"><br>
<input type="text" style="font-size:20px" value="修改文字大小為 20px">
CSS 控制文字大小的語法是 font-size，範例就透過 font-size 來設定不同尺寸的文字，12px、16px、20px 隨著數字加大，文字也越來越大，更進一步了解文字尺寸設計請參閱：CSS font-size 文字大小。
修改 HTML input type text 文字字型
<input type="text" style="font-family:serif;" value="修改字型為 serif">
<input type="text" style="font-family:DFKai-sb;" value="修改字型為標楷體">
<input type="text" style="font-family:Microsoft JhengHei;" value="修改字型為微軟正黑體">
範例輸出結果<input type="text" style="font-family:DFKai-sb;" value="修改字型為標楷體">
<input type="text" style="font-family:Microsoft JhengHei;" value="修改字型為微軟正黑體">
CSS 控制文字字型的是 font-family，在此範例中共使用了三種不同的字型，第一種 serif 是屬於通用字型，而第二種標楷體以及第三種的微軟正黑體都屬於特殊字體，除了 Windows 以外的其他作業系統可能沒有效果，除非 user 有在電腦安裝這些字體，更進一步了解 css 字型設定以及通用字體的選用，請參閱：CSS font-family 字型。
修改 HTML input type text 欄位內距
<input type="text" style="padding:5px;" value="修改內距為 5px"><br>
<input type="text" style="padding:10px;" value="修改內距為 10px">
範例輸出結果<input type="text" style="padding:10px;" value="修改內距為 10px">
CSS 控制容器內距的語法是 padding，在此範例中，我們設定了 padding:5px 以及 padding:10px 兩種不同的內距做比較，可以看出內距設越大，文字與欄位邊框的距離就越遠，關於內距詳細的用法，請參閱：CSS padding 內距屬性與用法範例。
整合寫法
以上三個範例整合在一起嗎？當然可以，例如我們要寫一個文字大小為 13px、字型為 serif 且內距為 6px 的文字輸入欄位，可以這樣寫。
<input type="text" style="font-size:13px;font-family:serif;padding:6px;" value="修改文字欄位整合寫法">
輸出結果只要將每個不同屬性的語法用分號（;）隔開就可以整合在一起，是不是非常簡單呢？
我們的 Facebook 粉絲團開始招募粉絲囉！歡迎加入：Wibibi 網頁設計教學分享粉絲團
延伸閱讀