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的opacity属性设置透明效果的用法
May 09 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
农民和部队如何穿矿
2020/03/04 星际争霸
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python字符串转换成浮点数函数分享
2015/07/24 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
给女朋友的道歉信
2014/01/10 职场文书
cf搞笑广告词
2014/03/14 职场文书
娱乐节目策划方案
2014/06/10 职场文书
优秀应届生求职信
2014/06/16 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
房屋维修申请报告
2015/05/18 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript