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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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 has encountered an Access Violation
2007/01/15 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
python ddt实现数据驱动
2018/03/14 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
岗位职责的定义
2013/11/10 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
幼儿园见习总结
2015/06/23 职场文书
地震捐款简报
2015/07/21 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python