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>

  

效果:

 
参考:
 

DIV实现CSS 的placeholder效果的更多相关文章

  1. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  5. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  7. css的border效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  9. Css实现透明效果,兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

随机推荐

  1. ios initialize和init等方法

    在程序运行过程中,创建多个类对象,只会调用一次initialize  [ɪˈnɪʃəˌlaɪz] .而创建几个类对象就会调用几次init; 创建一个类aa,分别重写 initialize和init方法 ...

  2. Attributes:文本属性 和NSAttributedString

    前言: 有一些控件无法直接设置文本大小,需要使用方法 setTitleTextAttributes 来设置文本属性 UIFont 字体样式 [UIFont fontWithName~]; iOS- 详 ...

  3. [Leetcode][JAVA] Word Ladder II

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  4. Extjs的GridPanel的RowExpander的扩展

    对Extjs的grid使用,有时候单单使用其中的某些组.或某些行是远远不够的,还需要对行进行一些扩展,如:与filters相似的row扩展控件,如下 这个控件,我也是从网上找的小例子,按照其内部的某些 ...

  5. [C#] 與Android共舞–手機post資料給Server (转帖)

    最近在搞安卓,跟Server溝通是一定要的,這範例很簡單,就是我在Android 上面,透過POST 的方式傳資料給 Server ,則Server 收到值後直接回傳, Server side 是用a ...

  6. 尝试在mac上用dotnet cli运行asp.net core示例程序

    自从知道微软用dotnet cli取代dnx之后,一直在等dotnet cli支持asp.net core... 昨天看到这篇新闻(ASP.NET Core 1.0 Hello World)后,才知道 ...

  7. kali linux 渗透测试视频教程 第五课 社会工程学工具集

    第五课 社会工程学工具集 文/玄魂 教程地址:http://edu.51cto.com/course/course_id-1887.html   目录 第五课社会工程学工具集 SET SET的社会工程 ...

  8. Nginx学习笔记(九) 配置文件详细说明

    配置文件详细说明 工作了几个月要开始做一些后台开发,免不了接触nginx,以前一般只是简单的使用,更多的分析内部模块的具体实现,为了部署需要进一步掌握配置方法. 全局配置信息 #nginx worke ...

  9. [WinAPI] API 8 [获取磁盘空间信息]

    获取磁盘分区的总容量和空闲空间的容量可以使用GetDiskFreeSpace函数或GetDiskFree SpaceEx函数.GetDiskFreeSpace使用DWORD类型作为输出参数,由于DWO ...

  10. IBM的“认知计算时代”

    IBM 提出信息技术进入“认知计算时代”.所有电子设备都有潜力发展出认知能力,换言之,都可以像人一样‘思考’. 何为认知计算时代呢?  认知计算系统能够学习并与人类自然地交流,以扩展人类或机器可亲自执 ...