表單是網頁中常見的一種元素,我們可以通過CSS對表單進行裝修,讓其更好看、更易用。下面將介紹一些常見的表單裝修技巧。
/* 定義表單輸入框的樣式 */ input[type=text], input[type=email], textarea { box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; padding: 12px 20px; font-size: 16px; } /* 定義表單提交按鈕的樣式 */ input[type=submit] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } /* 定義表單輸入框獲取焦點時的樣式 */ input[type=text]:focus, input[type=email]:focus, textarea:focus { border: 2px solid #4CAF50; } /* 定義表單輸入框中的錯誤提示 */ input[type=text].error, input[type=email].error, textarea.error { border: 2px solid #f00; }
上述代碼中,我們為表單的輸入框和提交按鈕分別定義了樣式,同時也定義了輸入框獲取焦點時的樣式。此外,如果表單輸入框中存在錯誤,我們也可以通過添加error類來定義錯誤提示的樣式。
此外,我們還可以通過CSS對表單的布局進行調整。比如,可以使用grid或flex布局對輸入框進行排列,或者使用CSS調整表單組件之間的間距。