html5配合css3实现带提示文字的输入框(摆脱js)
很久没写过技术文章了,最近一直在以Webkit作为载体开发系统,当然需要大量使用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浏览器下才看到完整效果。是不是很方便?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>placeholder Demo</title> </head> <body> <style> input[type=text], input[type=password] { border-color: #bbb; height: 38px; font-size: 14px; border-radius: 2px; outline: 0; border: #ccc 1px solid; padding: 0 10px; width: 250px; -webkit-transition: box-shadow .5s; margin-bottom: 15px; } input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus { border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s; } 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; } </style> <input type="text" placeholder="用户名或邮件地址" name="username" /> <input type="password" placeholder="密码" name="password" /> </body> </html>
html5配合css3实现带提示文字的输入框(摆脱js)的更多相关文章
- input 标签实现带提示文字的输入框
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
- HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置
在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...
- IT兄弟连 HTML5教程 CSS3属性特效 自定义文字
字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的 ...
- CSS3 实现厉害的文字和输入框组合效果
最近在忙着弄网站,学到了不少效果,这又是一个厉害的 <html> <head> <meta http-equiv="Content-Type" co ...
- css3购物网站商品文字提示实例
css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- Unity3D基础学习 NGUI自带Tooltip制作提示文字
简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...
- (近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备
作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
随机推荐
- jQuery Datetable
先来个官网可以直接看官网 https://www.datatables.net/manual/data/ 安装 DataTables是一个功能强大的Javascript库,用于为HTML表格添加交互 ...
- 在 TensorFlow 中实现文本分类的卷积神经网络
在TensorFlow中实现文本分类的卷积神经网络 Github提供了完整的代码: https://github.com/dennybritz/cnn-text-classification-tf 在 ...
- python2.7入门---条件语句
前段时间呢,把MongoDB的基础内容了解的差不多了.接下来,就开始学习python2.7的基础内容喽.接着前面的知识点来学习.首先,来看一下条件语句.Python条件语句是通过一条或多条语句 ...
- 14_Python将列表作为栈和队列_Python编程之路
上一篇文章跟大家介绍了列表的一些方法,这一节我们还是讲列表 只是这一节我们要联系一些数据结构,来讲列表 栈 首先我们要理解一下栈是一种什么数据结构 栈(stack)又名堆栈,它是一种运算受限的线性表. ...
- Spring常用接口和类
一.ApplicationContextAware接口 当一个类需要获取ApplicationContext实例时,可以让该类实现ApplicationContextAware接口.代码展示如下: p ...
- python函数调用之自我调用与C++比较
C++下的函数自我自我调用 第一种方法 #include <iostream> using namespace std; int rel_do(){ int a; cout<< ...
- Laravel-admin 七牛云上传文件到七牛云出现卡顿失败情况
由于所做项目需要管理后台众多,所以选择了Laravel-admin后台框架进行开发.节省了权限控制以及页面处理等问题的时间 Laravel-admin文档地址 http://laravel-admin ...
- 网页底部广告悬浮弹窗(css)
有的单页面需要添加广告等悬浮div. 部分代码: <div class="flex"> 内容.... </div> 主要css代码: .flex{posit ...
- Rstudio-server 重新登录载入session的问题
Rstudio-server 非常好用,但是免费版的也有一些问题,一个是只能支持在一个客户端的登录,另一个就是每次登录都要导入之前session的问题,对于第二个问题的解决方案,我们可以进入到~/.r ...
- 使用GDAL进行RPC坐标转换
使用GDAL进行RPC坐标转换 对于高分辨率遥感卫星数据而言,目前几乎都提供了有理函数模型(RFM)来进行图像校正(SPOT系列提供了有理函数模型之外还提供了严格轨道模型).对遥感影像进行校正目前最常 ...