CSS的@input規則是指重寫一個輸入元素的樣式,包括文本輸入框、單選按鈕、復選框等等。
input[type=text]{ border: 1px solid gray; background-color: white; color: black; padding: 10px; font-size: 16px; }
上述代碼表示對文本輸入框應用的樣式。其中,設置了文本框的邊框、背景色、字體顏色、內邊距和字體大小。
除了可以針對特定類型的輸入元素應用樣式外,@input還可以通過相應的偽類選擇器來細分選中元素的狀態,如:hover、:focus等。
input[type=text]:hover{ border-color: blue; } input[type=text]:focus{ border-color: green; }
上述代碼表示當鼠標懸停在文本框上時,邊框顏色變為藍色;當文本框獲取焦點時,邊框顏色變為綠色。
除了上面所示的這些,@input還有其他用法,比如可以修飾checkbox的某一狀態、設置多選框的背景等等。
input[type=checkbox]:checked + span{ background-color: green; }
上述代碼表示當復選框被選中時,緊隨其后面的span元素的背景色變為綠色。
總體來說,@input是一種非常常用的CSS規則,它可以方便地針對特定類型的輸入元素、特定狀態下的元素進行樣式處理,從而實現更加靈活的布局和展示效果。