DIV实现CSS 的placeholder效果

 2023-09-09 阅读 19 评论 0

摘要:placeholder 是HTML5中input的属性,但该属性并不支持除input以外的元素 但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Div+placeh
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



转载于:https://www.cnblogs.com/huangtailang/p/5899278.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/2/21929.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息