CSS文本框默認指的是未經過樣式設置的<input>和<textarea>文本輸入框的樣式。在默認情況下,這些文本框的樣式可能會導致頁面不美觀,并且不符合設計要求,因此我們需要對其進行樣式設置。
/* 修改input默認樣式 */ input { border: 1px solid #ccc; padding: 5px; font-size: 14px; color: #333; } /* 修改textarea默認樣式 */ textarea { border: 1px solid #ccc; padding: 5px; font-size: 14px; color: #333; resize: vertical; /* 只允許豎向拖拽改變文本框大小 */ }
通過以上代碼可以看出,我們可以針對<input>和<textarea>分別添加樣式,設置它們的邊框、內邊距、字號、字體顏色等。值得注意的是,在設置<textarea>時,還可以添加resize屬性,讓用戶只能在豎直方向上拖動改變文本框大小。
為了更好地控制文本框樣式,我們還可以使用CSS偽類選擇器來改變文本框在不同狀態下的樣式,例如聚焦、被選中等狀態。
/* 修改input在聚焦狀態下的樣式 */ input:focus { border-color: #4d90fe; outline: none; box-shadow: 0 0 5px rgba(77,144,254,.5); } /* 修改textarea在被選中狀態下的樣式 */ textarea:active { border-color: #e67e22; }
通過以上代碼可以看出,我們分別使用了:focus和:active偽類選擇器,分別改變了文本框在聚焦和被選中狀態下的樣式。這些樣式改變可以在用戶與網頁進行交互時提供更好的視覺反饋。