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