HTML input type text 的邊框顏色與樣式設計

HTML input type text 的邊框顏色與樣式可以透過 CSS 的 border-colorborder-width 以及 border-style 來設計,或者直接使用 CSS border 的邊框設計方式處理,這兩種方式都是同樣的道裡,差別僅在於 css 語法的應用,以下範例就以不同的寫法來做範例。

範例一、使用 border-color、border-width 以及 border-style 來設計
<input type="text" style="border-color:green;border-width:3px;border-style:dotted;">
輸出結果
範例在 input type text 標籤內使用 style 來宣告一段 css 語法的開始,在 style 中共使用了三個 css 語法,分別為 border-color:green 代表邊框顏色是綠色、border-width:3px 代表邊框寬度為 3px、border-style:dotted 代表邊框的樣式為點線,範例的每個項目都可以自己變更出不同的設計風格,舉例來說 border-color 的顏色就可以從《色碼表》中挑選不同的顏色,border-width 可以自己改變為其他寬度,例如 1px、6px ... 等,最後的樣式可以參考這篇:「CSS border-style 邊框樣式」裡面的樣式清單。

範例二、直接使用 border 語法來處理
<input type="text" style="border:3px green dotted;">
輸出結果
範例一將 border 的寬度、顏色以及樣式拆分開來寫,雖然表達很清楚,但某些時候似乎不這麼有效率,CSS 提供了一個 border 語法可以輕易的用簡短寫法完成同樣的效果,由範例二的語法與範例一的語法比較,可以發現 border 將寬度、顏色以及樣式全部整合在一起,這樣的寫法可以呈現相同的效果,且寫 code 的效率也更高,同樣的,border 裡面的每個項目都可以自己調整修改。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012