具有contenteditable属性的可编辑div模拟input的placeholder
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .editable-div { width: 600px; height: 36px; border: 1px solid #ccc; font-size: 12px; line-height: 36px; padding: 0 12px; margin: 0 auto; margin-top: 200px; } .editable-div[contenteditable]:empty::before { content: attr(placeholder); color: #ccc; } .editable-div[contenteditable]:focus { content: none; outline: none; border: 1px solid #2662c4; } </style> <title>Document</title> </head> <body> <div class="editable-div" contenteditable="true" placeholder="请输入内容"></div> </body> </html>
posted on 2023-10-31 15:20 hanguahannibk 阅读(74) 评论(0) 编辑 收藏 举报