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. Hive安装与部署集成mysql

    前提条件: 1.一台配置好hadoop环境的虚拟机.hadoop环境搭建教程:稍后补充 2.存在hadoop账户.不存在的可以新建hadoop账户安装配置hadoop. 安装教程: 一.Mysql安装 ...

  2. Setting SVN Repository Using TortoiseSVN + Dropbox in 5 Minutes

    SVN is a very common version control system in software development. However configuring SVN server ...

  3. [Leetcode][JAVA] Triangled

    Triangle Given a triangle, find the minimum path sum from top to bottom. Each step you may move to a ...

  4. maven异常

    1.There are test failures pom中加入: <build> <plugins> <plugin> <groupId>org.ap ...

  5. 如何防止鼠标移出移入子元素触发mouseout和mouseover事件

    js代码: function isMouseLeaveOrEnter(e, handler) { var reltg=e.relatedTarget?e.relatedTarget:e.type==' ...

  6. 技术文档--svn

    1.什么是版本控制,说出常见的版本控制系统及其区别版本控制它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编 ...

  7. go protobuf 安装

    1.https://github.com/google/protobuf/releases/tag/v3.0.0 下载需要的版本,如果执行autogen.sh的过程中出现autoreconf not ...

  8. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

  9. LoadRunner测试50人同时登陆下单

    LoadRunner测试50人同时登陆下单 一.LoadRunner简介 LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找 ...

  10. We are doomed, and RPC does not help

    第一种死法:Big ball of Mud 架构里最常用的反面案例是 big ball of mud.很大程度上可以说打格子,把复杂的系统拆解成小格子是架构师最重要的工作.这个小格子有很多种名字,比如 ...