html5配合css3实现带提示文字的输入框(摆脱js)


Posted in HTML / CSS onMarch 08, 2013

很久没写过技术文章了,最近一直在以Webkit作为载体开发系统,当然需要大量使用Html5与CSS3,不仅减少大量的JS还可以保证更流畅。
html5配合css3实现带提示文字的输入框(摆脱js) 
当选中对话框后,提示文字变浅色,输入后消失.这个现在通行的做法是在Input标签后面增加一个Label。使用JS控制。
HTML5出现后,我们有一个更好的方法。 

复制代码
代码如下:

<input type="text" placeholder="用户名或邮件地址" name="username"/>

我们看到有placeholder标签,可以作为用户文字提示。这样子就非常方便了。但是为了最求完美,我们需要在选中后,将文字变浅,或者修改提示文件的样式,我们该怎么办?
复制代码
代码如下:

input::-webkit-input-placeholder {
color: #999;
-webkit-transition: color.5s;
}
input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {
color: #c2c2c2;
-webkit-transition: color.5s;
}

-webkit-input-placeholder,webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登录、搜索等位置很适合。当然你要为了兼容IE6,这个方法是行不通。不过Ie9也支持placeholder标签,就是无法修改它的颜色而已。
那么,如果不支持该怎么办?可以简单直接使用Jquery帮忙,那么在就不在本文讨论范围了。
给一个Demo,Demo地址 必须在Webkit浏览器下才看到完整效果。是不是很方便?
HTML / CSS 相关文章推荐
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 #HTML / CSS
html5新增的属性和废除的属性简要概述
Feb 20 #HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 #HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 #HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 #HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 #HTML / CSS
You might like
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
js不是基础的基础
2006/12/24 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Python 专题四 文件基础知识
2017/03/20 Python
python递归实现快速排序
2018/08/18 Python
详解python深浅拷贝区别
2019/06/24 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
关于工资低的辞职信
2014/01/14 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
爱护公物演讲稿
2014/09/09 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
军训通讯稿范文
2015/07/18 职场文书
KTV员工管理制度
2015/08/06 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python