CSS控制input狀態(tài)

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=text]:focus {
border: 3px solid #555;
}

在網(wǎng)頁布局中，輸入框經(jīng)常作為表單中的一部分，用來收集用戶輸入的數(shù)據(jù)。CSS可以幫助我們控制輸入框的樣式，包括它的大小、邊框、背景顏色等等。此外，CSS還可以通過控制input的不同狀態(tài)來改變它的樣式，例如焦點狀態(tài)、鼠標懸停狀態(tài)等等。

在上面的代碼中，我們使用了input選擇器來選中所有type為text的輸入框，然后通過width、padding、margin屬性來設置它的大小和位置。同時，我們使用了box-sizing:border-box屬性來限定輸入框的尺寸是包含了邊框和內(nèi)邊距的盒子。

接下來，我們使用了偽類選擇器:focus來選中輸入框處于焦點狀態(tài)時的樣式。在這里，我們設置了一個3像素的實心邊框，顏色為#555。這樣，在用戶點擊輸入框時，邊框會變得更加明顯，加強了用戶的視覺反饋。

除了:focus偽類選擇器，CSS還提供了其他一些選擇器來控制輸入框的不同狀態(tài)，例如:hover、:disabled等等。使用這些選擇器，我們可以通過簡單的CSS代碼來提高表單的易用性和美觀性。