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 >>>>>>>>>>>>>>>>>>>>> ...
随机推荐
- 中国排名前100的IT公司 （转）
排序 单位名称 软件收入 1 华为技术有限公司 622360 2 中兴通讯股份有限公司 601331 3 海信集团有限公司 448641 4 UT斯达康通讯有限公司 386763 5 海尔集团 ...
- DevExpress组件之——PopupMenu组件(转)
出处:http://www.cnblogs.com/xlx0210/archive/2010/07/14/1777366.html 目录在项目中使用了第三方控件DevExpress,得开始研究其他控件 ...
- java环境配置总结
最近接触java,在环境配置上费了不少劲.总结一下: 1.首先安装jdk和Eclipse,jdk我安装的是1.6,Eclipse可以从官网下载:http://download.eclipse.org/ ...
- day5----模块
1.定义 模块:用来从逻辑上组织python代码(变量,函数,类,运行逻辑:实现一个功能),本质就是.py结尾的python文件(文件名:test.py,对应的模块名:test) 包: ...
- 应用SQLServer For XML 生成XML避免在C# 拼字符串
最近在Review代码时,有一个功能是 查询数据库中一列,然后生成像 <rootelements> <col>a</col> <col&g ...
- [自娱自乐] 4、超声波测距模块DIY笔记（四）——终结篇·基于C#上位机软件开发
前言 上一节我们已经基本上把超声波硬件的发射和接收模块全部做好了,接下来我们着手开发一个软硬结合的基于C#的平面定位软件! 目录 一.整体思路 二.效果提前展示 2-1.软件部分展示 2-2.硬件部分 ...
- [C++] 行程编码C++代码
#include<iostream> #include<string.h> #include<string> #include<cstring> #in ...
- [ACM_几何] UVA 11300 Spreading the Wealth [分金币 左右给 最终相等 方程组 中位数]
Problem A Communist regime is trying to redistribute wealth in a village. They have have decided to ...
- 最新最全的js判断移动设备及操作系统
var navigator = window.navigator, userAgent = navigator.userAgent, android = userAgent.match(/(Andro ...
- PHP 开发社区微信服务号实战图解
本博文就月初刚上线的微信服务号,图文进行总结分享给大家. 去年年底,我所在的团队讨论要开发微信号,话题由此拉开: 原来有一个3年前注册的微信号,但是后台操作无法从“订阅号”变更为“服务号”,随即找腾讯 ...