CSS中的標簽常用于表單的輸入框、按鈕等。下面我們來看一些在CSS中對標簽的應用方法。
/* 設置輸入框的大小和顏色 */ input[type="text"] { width: 200px; height: 30px; background-color: #f2f2f2; border: none; padding: 5px; } /* 設置按鈕的樣式 */ input[type="submit"] { background-color: #008CBA; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } /* 鼠標經過按鈕的樣式 */ input[type="submit"]:hover { background-color: #004d61; } /* 禁用狀態下的按鈕樣式 */ input[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; } /* 設置勾選框的樣式 */ input[type="checkbox"] { width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } /* 設置單選框的樣式 */ input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; } /* 設置下拉框的樣式 */ select { width: 100%; height: 30px; background-color: #f2f2f2; border: none; padding: 5px; } /* 設置文本域的樣式 */ textarea { width: 100%; height: 100px; background-color: #f2f2f2; border: none; padding: 5px; }
通過上述代碼,我們可以根據需要自定義輸入框、按鈕、勾選框、單選框、下拉框、文本域等標簽在網頁中的樣式。