CSS 表單
使用 CSS 可以極大地改善 HTML 表單的外觀
樣式化輸入欄位
使用 width 屬性確定輸入欄位的寬度
上面的示例適用於所有 <input> 元素。如果要只樣式化特定型別的輸入，可以使用屬性選擇器
input[type=text]- 只選擇文字欄位input[type=password]- 只選擇密碼欄位input[type=number]- 只選擇數字欄位- 等等..
帶內邊距的輸入欄位
使用 padding 屬性在文字欄位內新增空間。
提示：當有許多輸入欄位連續出現時，你可能還想新增一些 margin，以在它們外部新增更多空間
示例
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
自己動手試一試 »
請注意，我們將 box-sizing 屬性設定為 border-box。這確保了內邊距和邊框最終包含在元素的總寬度和高度中。
請閱讀我們 CSS 盒子模型章節中關於 box-sizing 屬性的更多內容。
帶邊框的輸入欄位
使用 border 屬性更改邊框的大小和顏色，並使用 border-radius 屬性新增圓角
如果只想新增底部邊框，請使用 border-bottom 屬性
彩色輸入欄位
使用 background-color 屬性為輸入新增背景色，並使用 color 屬性更改文字顏色
聚焦的輸入欄位
預設情況下，某些瀏覽器會在輸入欄位獲得焦點（點選時）時新增藍色輪廓。您可以透過向輸入新增 outline: none; 來移除此行為。
使用 :focus 選擇器在輸入欄位獲得焦點時執行某些操作
帶圖示/圖片的輸入欄位
如果您想在輸入欄位中新增圖示，請使用 background-image 屬性並使用 background-position 屬性進行定位。同時請注意，我們添加了較大的左內邊距以預留圖示的空間
示例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
自己動手試一試 »
動畫搜尋輸入欄位
在此示例中，我們使用 CSS 的 transition 屬性來在搜尋輸入欄位獲得焦點時為其寬度新增動畫效果。您將在我們關於 CSS 過渡 的章節中學習更多關於 transition 屬性的知識。
示例
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
自己動手試一試 »
樣式化文字區域
提示：使用 resize 屬性可以防止文字區域被調整大小（停用右下角的“拖動器”）
示例
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
自己動手試一試 »
樣式化選擇選單
示例
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
自己動手試一試 »
樣式化輸入按鈕
示例
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* 提示：使用 width: 100% 使按鈕全寬 */
自己動手試一試 »
有關如何使用 CSS 樣式化按鈕的更多資訊，請閱讀我們的 CSS 按鈕教程。
響應式表單
調整瀏覽器視窗大小以檢視效果。當螢幕寬度小於 600px 時，使兩列堆疊在一起而不是並排顯示。
高階：下面的示例使用了 媒體查詢 來建立響應式表單。您將在後續章節中瞭解更多關於此內容。
