CSS提交按鈕和重填按鈕是網頁表單中非常重要的兩個元素,它們可以讓用戶提交表單、清空表單或者重新填寫表單。下面將介紹如何通過CSS來定義這兩個按鈕的樣式。
/* 定義提交按鈕的樣式 */ input[type="submit"] { background-color: #4CAF50; /* 設置按鈕背景顏色 */ color: white; /* 設置按鈕文字顏色 */ padding: 10px 20px; /* 設置按鈕內邊距 */ border: none; /* 去掉按鈕邊框 */ border-radius: 4px; /* 設置按鈕圓角 */ cursor: pointer; /* 把鼠標變成手型指針 */ margin-top: 20px; /* 上下留出一定距離 */ } /* 定義重填按鈕的樣式 */ input[type="reset"] { background-color: #f44336; /* 設置按鈕背景顏色 */ color: white; /* 設置按鈕文字顏色 */ padding: 10px 20px; /* 設置按鈕內邊距 */ border: none; /* 去掉按鈕邊框 */ border-radius: 4px; /* 設置按鈕圓角 */ cursor: pointer; /* 把鼠標變成手型指針 */ margin-top: 20px; /* 上下留出一定距離 */ }
上述代碼中,我們通過CSS的input選擇器來定義了提交按鈕和重填按鈕的樣式。其中,我們設置了按鈕的背景顏色、文字顏色、內邊距、邊框、圓角和鼠標指針等屬性,讓按鈕看起來比較美觀和易于使用。
通過CSS,我們可以很方便地自定義網頁表單中的提交按鈕和重填按鈕的樣式,讓用戶有更好的體驗和操作效果。