CSS輸入文本框是一個非常重要的網頁元素,它可以讓用戶在提交表單或搜索時輸入內容,并且可以通過CSS樣式來調整外觀。
/*CSS樣式*/ input[type=text]{ padding: 10px; border: 1px solid gray; border-radius: 5px; font-size: 16px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
在上面的代碼中,我們使用了input[type=text]選擇器來選中輸入框,并指定了一些樣式,如內邊距、邊框、圓角、字體大小和盒子陰影。這些樣式可以根據需要進行調整,以適應不同的設計和網站風格。
此外,CSS還可以用來控制輸入框的狀態,如聚焦狀態、禁用狀態等。例如:
/*聚焦狀態*/ input[type=text]:focus{ border-color: blue; box-shadow: 0 0 5px blue; } /*禁用狀態*/ input[type=text]:disabled{ opacity: 0.6; }
在上述代碼中,我們通過:focus偽類選擇器來指定輸入框在聚焦狀態下的樣式,如改變邊框顏色和盒子陰影。而通過:disabled偽類選擇器,我們可以指定輸入框在禁用狀態下的樣式,如降低透明度。
總的來說,CSS輸入文本框是一個非常靈活和具有擴展性的網頁元素,可以通過樣式控制其外觀和狀態,以滿足不同的需求。