CSS3是指為網頁添加更多樣式和特效功能的升級版CSS。其中包含了很多強大的功能,其中就包括了input輸入框獲取焦點時顯示邊框的效果。
使用CSS3中的:focus偽類,可以實現為輸入框添加邊框的效果。代碼如下:
input[type=text]:focus, input[type=password]:focus { border: 2px solid #a5def2; outline: none; }
上述代碼表示,當文本輸入框或密碼輸入框獲得焦點時,顯示一個2像素寬的、顏色為#a5def2的邊框,并且去掉默認的外部輪廓。
除了描邊外,我們還可以在輸入框聚焦時,應用其他的樣式效果,如修改背景色等。例如:
input[type=text]:focus, input[type=password]:focus { border: 2px solid #a5def2; outline: none; background-color: #f2f2f2; color: #333; }
上述代碼中,聚焦時不僅會顯示邊框,還會將輸入框背景色修改為#f2f2f2,字體顏色修改為#333。其他效果可以根據具體需求靈活使用。
總之,CSS3中的:focus偽類是一個非常實用的功能,能夠通過簡單的CSS代碼為輸入框添加各種聚焦時的樣式效果,為網頁增加更多的設計元素。