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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
使用CSS实现音波加载效果
May 07 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实现贪吃蛇小游戏
2016/07/26 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
python字符串替换示例
2014/04/24 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python pytest进阶之fixture详解
2019/06/27 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
深入了解python列表(LIST)
2020/06/08 Python
python Tornado框架的使用示例
2020/10/19 Python
美国渔具店:FishUSA
2019/08/07 全球购物
应届大学生自荐信
2013/12/05 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
工地安全标语
2014/06/07 职场文书
党支部先进事迹材料
2014/12/24 职场文书
课改心得体会范文
2016/01/25 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫