HTML中表單是非常常見的元素,但是默認情況下,它們可能顯得有點乏味。所以,使用CSS來為表單添加一些修飾是很有必要的。
/* 基礎表單樣式 */ input[type=text], textarea { padding: 10px; border: 2px solid #ddd; border-radius: 5px; box-sizing: border-box; } /* 焦點樣式 */ input[type=text]:focus, textarea:focus { outline: none; border-color: #2ecc71; } /* 提交按鈕 */ input[type=submit] { padding: 10px 20px; background-color: #2ecc71; color: #fff; border: none; border-radius: 5px; cursor: pointer; } /* 懸停樣式 */ input[type=submit]:hover { background-color: #27ae60; } /* 取消按鈕 */ input[type=reset] { padding: 10px 20px; background-color: #e74c3c; color: #fff; border: none; border-radius: 5px; cursor: pointer; } /* 懸停樣式 */ input[type=reset]:hover { background-color: #c0392b; }
上面的代碼為基本的HTML表單提供了一些樣式,包括焦點樣式、提交和取消按鈕的樣式。可以根據具體的需求來修改和添加樣式。