来源：互联网 作者：佚名 时间：03-08 11:41:53 【大 中 小】
webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你

很久没写过技术文章了，最近一直在以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浏览器下才看到完整效果。是不是很方便？ 

Demo源码
<!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)的更多相关文章

  1. input 标签实现带提示文字的输入框

    方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...

  2. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 自定义文字

    字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计.美工设计师最常做的办法是把想要的 ...

  4. CSS3 实现厉害的文字和输入框组合效果

    最近在忙着弄网站,学到了不少效果,这又是一个厉害的  <html> <head> <meta http-equiv="Content-Type" co ...

  5. css3购物网站商品文字提示实例

    css3购物网站商品文字提示实例先来看效果图:<ignore_js_op> 当鼠标划过图片时,有着泰迪熊黑色长方形的背景就会出现.来看HTML5+CSS3代码: <!DOCTYPE ...

  6. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  7. Unity3D基础学习 NGUI自带Tooltip制作提示文字

    简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...

  8. （近万字）一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

    作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变, ...

  9. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

随机推荐

  1. 容器化分布式日志组件ExceptionLess的Angular前端UI

    写在前面 随着微服务架构的流行,日志也需要由专门的分布式日志组件来完成这个工作,我们项目使用的是 ExceptionLess 这个组件,它是前后端分离的:这篇文章我们就来实践容器化 Exception ...

  2. Linux下date使用

    [root@host1 ~]# date #显示时间 2017年 06月 01日 星期四 17:02:59 CST 以指定格式显示时间: [root@host1 ~]# date +%Y%m%d 20 ...

  3. CentOS 7 配置网络连接

    在VMware workstation12上新建虚拟机,发现无法连接网络.然后查了一些资料,知道了怎样配置网络,记录一下. 1.首先用ifconfig命令查看虚拟机的IP地址及网关信息 观察显示内容, ...

  4. Git 中 SSH key 生成步骤

    由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以必须要让github仓库认证你SSH key,在此之前,必须要生成SSH key. 第1步:创建SSH Key.在windows下 ...

  5. Python OptionParser 使用详解（转载）

    Python使用命令行参数能使处理流程更自动化. 链接的内容讲解得十分详细:https://www.tuicool.com/articles/rUvIbi

  6. Python安装与使用的常见问题

    1. Python安装问题 到Python官网下载Python最新版本 Windows x86-64 executable installer (64为操作系统选择这个) Windows x86 ex ...

  7. 最大熵模型The Maximum Entropy

    http://blog.csdn.net/pipisorry/article/details/52789149 最大熵模型相关的基础知识 [概率论:基本概念CDF.PDF] [信息论:熵与互信息] [ ...

  8. 一个貌似比较吊的递归转换为loop--总算成功了.

    class Stack(object): """ A class to hold arguements and state data. """ ...

  9. Python 继承标准类时发生了什么

    定义标准类dict的一个子类c: >>> class c(dict): pass >>> y=c({1:2,3:4}) >>> y {1: 2, ...

  10. Android Studio下多渠道打包

    Android Studio下实现多渠道打包 直接上步骤 步骤 1. 清单文件添加属性(以友盟统计为例) 在application标签下添加meta-data属性 <application -- ...