CSS可以通過偽類選擇器實現輸入提示。偽類選擇器是CSS中的一種技術,它可以根據元素在特定狀態下的不同表現方式來對其進行樣式設置。具體來說,使用:focus偽類選擇器可以在元素獲得焦點時修改它的樣式。
input:focus::placeholder { color: red; }
上述代碼通過:focus偽類選擇器來控制input元素在獲取焦點時顯示的輸入提示文字的樣式。其中,::placeholder是用來指定輸入提示文字的偽元素選擇器。
另外,如果要進一步改變輸入提示的內容,可以借助JavaScript來實現。下面是一個使用JavaScript在輸入框中實現輸入提示的例子:
<input type="text" id="input-box"> <script> const inputBox = document.querySelector('#input-box'); inputBox.addEventListener('focus', function() { inputBox.setAttribute('placeholder', '請輸入要搜索的內容'); }); inputBox.addEventListener('blur', function() { inputBox.setAttribute('placeholder', ''); }); </script>
上述代碼通過添加focus和blur事件來實現輸入框在獲取焦點和失去焦點時的動態效果。在獲取焦點時,會顯示相應的輸入提示文字,而在失去焦點時會將其清空。