来源：互联网 作者：佚名 时间：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. Python Django的分页，Form验证，中间件

    本节内容 Django的分页 Form 中间件 1 Django 分页 1.1 Django自带的分页 1.首先来看下我的测试数据环境 ############ models.py ######### ...

  2. vue-cli2.9.1如何自动打开浏览器及实现手机调试

    在vue-cli2.9.1以前我们运行 "npm run dev" 程序会自动打开浏览器进行调试,而且在手机浏览器输入 "IP地址:8080" 能实现在手机端的 ...

  3. VS2017+xamain开发安卓（Addroid）应用

    Visual Studio 2017下载地址: https://www.visualstudio.com/zh-hans/ 安卓模拟器官网下载:  https://www.visualstudio.c ...

  4. HTTPS介绍

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  5. 浅谈Java中的equals和==与hashCode

    转载:https://www.cnblogs.com/dolphin0520/p/3592500.html 参考:http://blog.csdn.net/yinzhijiezhan/article/ ...

  6. Hibernate的条件查询的几种方式

    1. 第一种,用?占位符,如: //登录(用?占位符) public List<UserPO> LoginUser(UserPO up)throws Exception{ Session ...

  7. 【阿里聚安全·安全周刊】Google“手枪”替换 | 伊朗中央银行禁止加密货币

    本周七个关键词:Google"手枪"替换丨IOS 漏洞影响工业交换机丨伊朗中央银行禁止加密货币丨黑客针对医疗保健丨付费DDoS攻击丨数据获利的8种方式丨MySQL 8.0 正式版 ...

  8. c++DLL编程详解

    DLL(Dynamic Link Library)的概念,你可以简单的把DLL看成一种仓库,它提供给你一些可以直接拿来用的变量.函数或类.在仓库的发展史上经历了“无库-静态链接库-动态链接库”的时代. ...

  9. swiper display:none 后 在显示 滑动问题

    一般这种问题  必须在本身元素  或者父元素  显示出来  然后调用swiper实例 或者只需加两行 observer:true, // 修改swiper自己或子元素时,自动初始化swiper obs ...

  10. 解决问题redis问题：ERR Client sent AUTH, but no password is set

    是的,这又是一个坑爹的问题. 明明在redis.conf中设置了密码,而且redis还启动了,为什么说没有密码呢? 大家都知道linux下启动redis有很多种方法, 其中有 ./redis-serv ...