首页 > 代码库 > DIV实现CSS 的placeholder效果
DIV实现CSS 的placeholder效果
placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素
但我们可以使用Css before选择器来实现完全相同的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Div+placeholder</title> <style> .rich{ color:balck; width:100px; height:100px; border: 1px solid red; margin: 20px 50%; } /*为空时显示 element attribute content*/ .rich:empty:before{ content: attr(placeholder); /* element attribute*/ /*content: ‘this is content‘;*/ color:#red; } /*焦点时内容为空*/ .rich:focus:before{ content:none; } </style></head><body> <div class=‘rich‘ contenteditable="true" placeholder=‘当 element 内容为空时,我就会出现‘></div></body></html>
效果：
参考：
HTML5 placeholder
CSS :before 选择器
线上Demo:DIV实现css placeholder效果
From WizNote
DIV实现CSS 的placeholder效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。