文章詳情頁
css3選擇器能否區分有輸入與無輸入的input?
瀏覽:165日期:2023-08-05 10:32:18
問題描述
例如用偽類:focus可以區分獲取焦點與無焦點的元素,并且是動態的我想在頁面input沒有輸入東西時一種表現,當用戶一輸入時又一種表現,動態的,能用選擇器區分開來嗎?
問題解答
回答1:input 貌似沒有,但 placeholder 是可以部分自定義的,比如用來設個背景顏色啥的,這樣也達到了純 CSS 區分有無內容目的。
::-webkit-input-placeholder { color: #000; background: red; border: 1px solid #000;}
不過呢,還可以考慮使用 <p contenteditable></p> 和 p:empty 來實現文本框和它的有無輸入的狀態。
<style> p:empty {color: #999; } p:empty::before {content: 'Empty'; }</style><p contenteditable></p>回答2:
沒有,這種效果用JS實現較為合適。
回答3:目前好像是沒有的,不過如果有的話肯定比 JS 方便
標簽:
CSS
相關文章:
1. javascript - immutable配合react提升性能?2. javascript - sublime快鍵鍵問題3. css - 寫頁面遇到個布局問題,求大佬們幫解答,在線等,急!~4. 實現bing搜索工具urlAPI提交5. javascript - nodejs關于進程間發送句柄的一點疑問6. javascript - vue-router 地址改變數據未改變7. 配置Apache時,添加對PHP的支持時語法錯誤8. phpstudy8.1支持win11系統嗎?9. javascript - 移動端上不能實現拖拽布局嗎?10. javascript - html5多個label中其中一個觸發change,如何判斷是哪一個出發了change
排行榜

網公網安備