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-12-03 15:50:00

    html5 audio stop功能

    html5并没有提供停止功能，我们需要通过其他方式来实现这个问题，下面我们来看下神仙般的操作。

  • 2019-12-03 16:33:49

    hapi,nuxtjs跨域请求

    简单请求 与 预检请求，Fetch 与 CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

  • 2019-12-03 16:36:03

    跨域资源共享 CORS 详解

    阮一峰大哥的文章写的不错，推荐，也推荐他的整个王章，大家可以去看一下啊。

  • 2019-12-03 16:37:01

    去除options，减少options的访问

    因为跨域请求，浏览器可能（后面讲）会发送一次options请求，如果处理不好，跨域还是会gg的。 之前很少涉及跨域，涉及也是简单请求（下面阮老师文章中区别热简单请求和复杂请求），所以基本不会很少关注options。后面就遇到坑了，下面讲讲注意点。

  • 2019-12-04 10:46:26

    nuxt.js项目中全局捕获异常并生成错误日志全过程

    　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。

  • 2019-12-04 10:47:59

    nuxt.js项目中全局捕获异常并生成错误日志全过程

    　需求：客户在使用过程中页面报错时，可以生成错误记录传回服务器，以便改进。 　　步骤： 　　　　一.全局捕获异常， 　　　　二.发送到服务端， 　　　　三.生成错误日志。 　　一.全局捕获异常 如图，vue提供了errorHandle这个方法来处理全局异常，更多详细内容参见官网。