CSS表單上移是指當表單中有多個輸入框時,輸入框的標簽會隨著鼠標聚焦而上移,以保證輸入框的內容不被標簽覆蓋。下面是一段簡單的CSS代碼實現表單上移效果:
label { position: absolute; left: 0; top: 15px; transition: all 0.2s ease-in-out; } input:focus + label, textarea:focus + label { top: -10px; font-size: 12px; color: #333; }
在這段代碼中,我們對輸入框的標簽設置了絕對定位,并且讓它們默認距離輸入框頂部15px。當輸入框獲得焦點時,我們使用相鄰選擇器(+)來選中它后面的標簽,并且將它們向上移動(top: -10px),同時縮小字號和改變顏色,實現了表單上移的效果。
值得注意的是,這種表單上移效果并不適用于所有的表單樣式。在某些情況下,它可能會導致界面過于復雜或者難以使用。因此,開發者需要在實際使用時根據具體情況進行評估和取舍。