HTML5表單是用于收集用戶信息的重要工具。為了定制表單的外觀,需要定義CSS樣式。使用CSS樣式可以改變表單元素的背景顏色、字體樣式以及表單邊框的形狀和顏色。
/* 下面的代碼用于定義表單的樣式 */ form { background-color: #fff; font-family: Arial, sans-serif; border: 2px solid #000; padding: 10px; } input[type="text"], input[type="password"], textarea { background-color: #eee; font-size: 16px; border: 1px solid #ccc; padding: 8px; width: 100%; margin-bottom: 10px; } input[type="submit"], button { background-color: #0047ab; color: #fff; padding: 10px; border: none; cursor: pointer; border-radius: 5px; } input[type="submit"]:hover, button:hover { background-color: #59a4e4; } label { display: block; margin-bottom: 5px; font-size: 18px; font-weight: bold; }
上述代碼將表單樣式定義為白色背景、黑色邊框、10像素填充和使用Arial字體。文本框和文本域使用灰色背景、灰色邊框和8像素填充。提交按鈕和按鈕將具有藍色背景、白色文本、10像素填充、無邊框、指針光標和5像素的邊框半徑。鼠標懸停在提交按鈕或按鈕上時,背景顏色將改為淡藍色。
標簽“label”用于定義表單域的標簽。在本例中,標簽具有塊顯示和粗體字。這使得標簽看起來更加清晰,并有助于用戶了解該表單域是什么。
在使用HTML5表單時,如果需要為表單定義自定義樣式,以上代碼就是一個好的起點。但是需要注意的是,為了確保樣式適用于所有瀏覽器,最好在代碼中添加其他的瀏覽器特定前綴。
上一篇css將表單的字移動
下一篇css小米輪播圖