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>

  

 效果:

 


  • 2021-01-08 16:47:37

    nodejs如何使用fetch

    node 中没有实现 fetch,你可以使用 node-fetch,使得在 node 中也可以使用 fetch.

  • 2021-01-08 16:49:59

    CommonJs 与 ESModule区别

    node中模块导入require是一个内置的函数,因此只有在运行后我们才可以得知模块导出内容,无法做静态分析

  • 2021-01-08 16:54:08

    如何在 Node.js 中使用 import / export 的三种方法

    注:第1、2种方法均是借助 babel,需要注意的是文章使用的babel版本 < 7。从 babel 7.X 版本开始,部分包名、用法发生了些许变化,大体与7之前的用法类似,详细请到官方手册学习 7.X 版本的改动(Babel 踩坑总结(三) —— 7.X 版本升级是我对 7.X 版本三大改动的总结)

  • 2021-01-10 17:19:00

    libc++_shared是什么冲突

    NDK 支持多种 C++ 运行时库。本文档介绍了这些库的相关信息、所涉及的折衷做法以及库的使用方法。

  • 2021-01-10 17:20:52

    NDK--CMakeLists配置第三方so库

    当我们创建一个NDK工程时,会自动创建一个CMakeLists.txt的文件,在AS中c++的编译器是使用LLVM,规则为cmake,今天来学习下cmake的基本套路 首先,我创建了两个NDK工程,第一个工程为lib,为第二个工程提供so库