CSS可以讓表單樣式變得漂亮,讓用戶更容易填寫表單。下面是一些常用的樣式技巧:
/* 設置輸入框的顏色和邊框 */ input[type=text], input[type=email], select, textarea { background-color: #f1f1f1; border: none; padding: 12px; margin: 8px 0; width: 100%; } /* 設置輸入框獲得焦點時的樣式 */ input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus { background-color: #ddd; outline: none; } /* 設置提交按鈕的樣式 */ input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } /* 設置提交按鈕的鼠標懸停樣式 */ input[type=submit]:hover { background-color: #45a049; } /* 設置錯誤提示的樣式 */ .error { color: red; }
這些樣式可以讓表單看起來整潔且易于填寫。在設計自己的表單樣式時,可以通過添加其他CSS屬性來調整顏色、字體、大小等,以滿足自己的需求。