DIV实现CSS 的placeholder效果
<!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效果的更多相关文章
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- js div浮动层拖拽效果代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- css的border效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于单个 div 的 CSS 画图
原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...
- Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
随机推荐
- POJ3680_Intervals
给你若干个区间,每个区间有一个权值,你可以选出某些区间,使得在保证没有任何一段的覆盖次数超过k的前提下,总的权值最大. 这个建模真的十分神奇,赞一个. 对于给出的每一个区间,离散化,最终我们可以知道所 ...
- select练习1
1. 查询Student表中的所有记录的Sname.Ssex和Class列. select t.sname ,t.ssex , t.sclass from student t 2. 查询教师所有的单位 ...
- zabbix告警“Zabbix poller processes more than 75% busy”
告警原因: 1.某个进程卡住了, 2.僵尸进程出错,太多,导致慢了 3.网络延迟(可忽略) 4.zabbix消耗的内存多了 告警危害: 普通告警,暂无危害(但是最好处理) 处理方法: 一:简单,粗暴( ...
- Monte Carlo 数值积分
var amount = 0.0d; var hitTheTargetCount = 0.0d; var M = 2.0d; var rnd=new Random(); ; i < ; i++) ...
- nodejs: 理解Buffer
学习nodejs中buffer这一章,有一段写到buffer的拼接,其中一段源码非常优美,特拿来与大家共享. var chunks = []; var size = 0; res.on('data', ...
- webdriver 获取元素焦点方法
--------------------------------------- http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2013/01 ...
- C++混合编程之idlcpp教程Lua篇(5)
上一篇在这 C++混合编程之idlcpp教程Lua篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial3中,同样加入了三个文件:LuaTutori ...
- mongoDB研究笔记：journaling保证意外故障下的数据完整性
mongoDB的Journaling日志功能与常见的log日志是不一样的,mongoDB也有log日志,它只是简单记录了数据库在服务器上的启动信息.慢查询记录.数据库异常信息.客户端与数据库服务器连接 ...
- IIS 7.5 + asp.net MVC4 设置路由处理URL请求
使用asp.net MVC4开发的网站,在本地的VS012环境下运行,一切正常.但当发布到Windows 2008 R2(IIS7.5 + Framework4.5)上时,访问相关网页时,出现有下面的 ...
- 敏捷开发 与 Scrum
敏捷开发以用户的需求进化为核心,采用迭代.循序渐进的方法进行软件开发.在敏捷开发中,软件项目在构建初期被切分成多个子项目,各个子项目的成果都经过测试,具备可视.可集成和可运行使用的特征.换言之,就是把 ...