CSS文本輸入域常常被用于表單的輸入框中,它可以美化用戶輸入的文本,增加表單的可讀性。在CSS中,我們可以使用以下代碼來定義文本輸入域的樣式:
/* 定義文本輸入域的樣式 */ input[type=text] { font-size: 16px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; } /* 當(dāng)輸入域聚焦時改變樣式 */ input[type=text]:focus { border: 1px solid #333; box-shadow: 0 0 5px #333; }在上面的代碼中,我們使用了input[type=text]選擇器來選中所有文本輸入域,并定義了它們的樣式。首先,我們設(shè)置了輸入域的字體大小為16像素,填充為10像素,并設(shè)置了一個5像素的圓角邊框。接下來,我們使用:focus偽類來將輸入域的樣式改變?yōu)榻裹c(diǎn)狀態(tài)下的樣式。在焦點(diǎn)狀態(tài)下,我們將邊框顏色改為深灰色,同時添加了一個5像素的陰影效果。 除了以上的樣式定義,我們還可以根據(jù)實(shí)際需要來調(diào)整文本輸入域的樣式,比如修改輸入域的高度、設(shè)置輸入域的背景色等等。在代碼中,我們可以通過修改上述代碼中的屬性值來實(shí)現(xiàn)不同的樣式變化。 總之,CSS文本輸入域是表單必不可少的一部分,通過合理的樣式定義,我們可以提高表單的可讀性和用戶體驗(yàn)。
下一篇css文本超長