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制作响应式导航菜单的方法
Jul 12 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 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+memcache实现的网站在线人数统计代码
2014/07/04 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python内建模块struct实例详解
2018/02/02 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
Python必须了解的35个关键词
2020/07/16 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
毕业证丢失证明
2014/01/15 职场文书
公司拓展活动方案
2014/02/13 职场文书
会计岗位描述
2014/02/22 职场文书
租房协议书范本
2014/04/09 职场文书
爱我中华教学反思
2014/04/28 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python