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 >>>>>>>>>>>>>>>>>>>>> ...
随机推荐
- stringgrid事件大全
3.StringGrid之Event事件 property LiveBinding //把对象之间的属性绑定起来(XE2新增功能) property OnApplyStyleLookup: TNo ...
- SpringMVC框架入门配置 IDEA下搭建Maven项目
初衷:本人初学SpringMVC的时候遇到各种稀奇古怪的问题,网上各种技术论坛上的帖子又参差不齐,难以一步到位达到配置好的效果,这里我将我配置的总结写到这里供大家初学SpringMVC的同僚们共同学习 ...
- Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目
前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS ...
- C++注册表操作
数据结构 注册表由键(或称"项").子键(子项)和值项构成.一个键就是分支中的一个文件夹,而子键就是这个文件夹中的子文件夹,子键同样是一个键.一个值项则是一个键的当前定义,由名称. ...
- linux ntp 服务器和用户端
ntp 服务器 1.输入 rpm -qa|grep ntp 查看是否安装了ntp服务器 2.如果没安装 yum -y install ntp 安装 3.修改 /etc/ntp.conf 将原serve ...
- Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解
http://hi.baidu.com/ltb6w/item/3a51f11926fda60ce75c361d Eclipse进行C/C++开发——Eclipse+CDT+MinGW的配置与使用详解 ...
- 第三天：JS事件详解-事件流
学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容: 1)基础概念 2)举例说明: 代码如上,如果用事件 ...
- 微信小程序事件始末及相关资料整理
转载请注明来源:前端之巅 微信公众号 小道消息 昨晚(9月21日晚)10:51,冯大辉在他的知名微信公众号小道消息上发了一篇7字标题的文章<微信应用号来了>,并加了"微信是一个操 ...
- Spring Mobile 1.1.0.RC1 和 1.0.2 发布
Spring Mobile 1.1.0.RC1 发布了,该版本包含: 支持 Firefox OS 设备的检测 修复了使用 LiteDeviceDelegatingViewResolver 处理重定向和 ...
- Android View 如何绘制
上文说道了Android如何测量,但是一个漂亮的控件我只知道您长到哪儿,这当然不行.只需要简单重写OnDraw方法,并在Canvas(画布)对象上调用那根五颜六色的画笔就能够画出这控件"性感 ...