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 相关文章推荐
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
CSS中使用grid布局实现一套模板多种布局
Jul 15 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
完美解决PHP中文乱码
2009/11/26 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
python中管道用法入门实例
2015/06/04 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python中数据库like模糊查询方式
2020/03/02 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python文件路径操作方法总结
2020/12/21 Python
Linux文件系统类型
2012/02/15 面试题
检察官就职演讲稿
2014/01/13 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
党性分析自查总结
2014/10/14 职场文书
基层党建工作简报
2015/07/21 职场文书
2015年教师节广播稿
2015/08/19 职场文书
Go语言grpc和protobuf
2022/04/13 Golang