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>

　　

 效果：

 


  • 精彩推荐

  • 2017-07-14 13:51:58

    NodeJS连接MySQL出现Cannot enqueue Handshake after invoking quit.

    原因在于node连接上mysql后如果因网络原因丢失连接或者用户手工关闭连接后，原有的连接挂掉，需要重新连接；如下代码，每次访问结束都关闭，每次开始访问前重连接下，代码中没有监听连接的fatal错误，copy需谨慎

  • 2017-07-14 13:53:02

    nodejs解决mysql和连接池(pool)自动断开问题

    最近在做一个个人项目，数据库尝试使用了mongodb、sqlite和mysql。分享一下关于mysql的连接池用法。项目部署于appfog，项目中我使用连接池链接数据库，本地测试一切正常。上线以后，经过几次请求两个数据接口总是报503。一直不明就里，今天经过一番排查终于顺利解决了。

  • 2017-07-15 16:13:26

    设置MySQL里的wait_timeout

    如果你没有修改过MySQL的配置，缺省情况下，wait_timeout的初始值是28800。

  • 2017-07-16 20:13:14

    nodejs,express 自制错误日志

    对于同步执行的代码，以上的处理已经足够简单。然而，当异步程序在执行时抛出异常的情况，Express 就无能为力。原因在于当你的程序开始执行回调函数时，它原来的栈信息已经丢失。

  • 2017-07-16 20:17:56

    NodeJS处理Express中异步错误

    本文主要阐述如何在 Express 中使用错误处理中间件（error-handling middleware）来高效处理异步错误。在 Github 上有对应 代码实例 可供参考。

  • 2017-07-17 09:36:47

    linux service 命令使用说明

    service命令用于对系统服务进行管理，比如启动（start）、停止（stop）、重启（restart）、查看状态（status）等。相关的命令还包括chkconfig、ntsysv等，chkconfig用于查看、设置服务的运行级别，ntsysv用于直观方便的设置各个服务是否自动启动。service命令本身是一个shell脚本，它在/etc/init.d/目录查找指定的服务脚本，然后调用该服务脚本来完成任务。