DIV用伪元素实现CSS的placeholder效果

2021-03-17 09:42:21

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>

　　

 效果：

 


  • 精彩推荐

  • 2019-01-21 09:41:54

    NodeJS实现视频转码

    视频转码就是一个先解码，再编码的过程，从而将原来的视频转换成我们需要的视频。这种转换可能包括各式(mp4/avi/flv等)、分辨率、码率、帧率等。

  • 2019-01-23 20:56:57

    YouTube视频爬虫-批量采集-低成本解决方案-技术难点和细节回顾

    对于我们这些国内玩家而言，实现youtube视频爬虫和批量采集有先天性的遗憾。起初，公司需要一大批的youtube视频，时长3分钟左右，720p下载的话，每视频30-50M左右。公司雇了一大批人，采购科学上网神器手工下载 ，无奈，效率之低令人发指。所以老板要我做爬虫自动采集，需求每天下载2000+个视频，视频存储需要提高国内访问速度，方便合作方的程序抓取我们的内容。 --------------------- 作者：ucsheep 来源：CSDN 原文：https://blog.csdn.net/ucsheep/article/details/81380342 版权声明：本文为博主原创文章，转载请附上博文链接！

  • 2019-01-24 16:11:39

    数据库去除重复记录

    如何删除数据库中重复的记录 一般情况下，数据库去重复有以下那么三种方法：

  • 2019-01-26 10:12:40

    一行代码让webview不加载图片

    最近项目中需要控制列表页和详情页图片资源的显示，列表页比较好做，详情页是用WebView来展示的，不太好控制图片资源的加载。在Google上找到了两个解决办法，跟大家分享一下！