CSS表單是構建網頁的重要元素之一。表單不僅可以讓用戶輸入信息,還可以進行數據驗證、提交數據等操作。下面是一些基本的CSS表單樣式。
/* 定義表單元素樣式 */ input, select, textarea { margin-bottom: 20px; padding: 10px; border: none; border-radius: 5px; box-shadow: 0 0 5px 0 #ccc; font-size: 16px; font-family: Arial, sans-serif; } /* 定義按鈕樣式 */ button { background-color: #008CBA; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 16px; cursor: pointer; } /* 鼠標懸停時按鈕樣式 */ button:hover { background-color: #007B9D; } /* 定義輸入框和文本域的寬度 */ input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; } /* 定義下拉菜單的寬度 */ select { width: 100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("arrow.png"); background-repeat: no-repeat; background-position: right center; } /* 鼠標懸停時下拉菜單的樣式 */ select:hover { border: none; background-color: #f2f2f2; }
以上代碼定義了輸入框、文本域、下拉菜單和按鈕的樣式。輸入框和文本域的寬度為100%,下拉菜單使用了自定義的箭頭圖標,并在鼠標懸停時改變背景顏色。按鈕使用了藍色背景和白色文字,并在鼠標懸停時改變背景顏色。
這些基本的表單樣式可以通過修改顏色、字體、邊框等屬性來實現多樣化的表現效果。同時也可以通過CSS實現表單驗證、響應式布局等功能。