如果你要美化一個輸入框,在用戶聚焦到輸入框時改變它的樣式,使用input:focus
選擇器就可以輕松實現。
input:focus { border: 2px solid #007bff; box-shadow: 0 0 5px #007bff; }
在上述代碼中,我們使用input:focus
選擇器選中了聚焦狀態的輸入框,然后設置了邊框寬度和顏色,以及陰影效果,讓輸入框看起來更加突出。
當然,這只是一個簡單的例子,你可以根據實際需求來自定義樣式。比如改變輸入框的背景顏色、大小和字體等等。
需要注意的是,在使用input:focus
選擇器時,要確保在樣式表中為input
元素設置了基本樣式,否則聚焦樣式效果可能會不盡如人意。
input { width: 200px; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; font-size: 14px; }
在上述代碼中,我們為input
元素設置了基本樣式,包括寬度、高度、邊框、圓角、內邊距和字體大小。這樣當輸入框聚焦時,我們就可以通過修改這些樣式來美化輸入框了。
總之,input:focus
選擇器是美化輸入框的重要工具之一,希望上述介紹對您有所幫助。
上一篇css里常見的樣式屬性
下一篇mysql 視圖行數