来源：互联网 作者：佚名 时间：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. Django中Form的基本使用

    from django import forms from django.forms import fields class UserInfo(forms.Form): username = fiel ...

  2. xml 和数组的相互转化

    数组转化为xml: function arrtoxml($arr,$dom=0,$item=0){ if (!$dom){ $dom = new DOMDocument("1.0" ...

  3. SQL Server数据库账号密码变更后导致vCenter Server无法访问数据库

    SQL Server数据库账号密码变更后导致vCenter Server无法访问数据库 1.1状况描述: 若SQL Server数据库的账号(这里以sa为例)密码发生了变更,那么连接数据的客户端vCe ...

  4. java HTTP请求工具

    package HttpRequestTest; import java.io.BufferedReader; import java.io.InputStream; import java.io.I ...

  5. BI之SSIS入门最新版Visual Studio调试技巧

    简介 最近公司业务需要用到BI SSIS,SSIS是什么?"SSIS是Microsoft SQL Server Integration Services的简称,是生成高性能数据集成解决方案( ...

  6. ASP.NET Core部署到Windows IIS

    网上已经有许多ASP.NET Core关于Widows IIS部署的文章,在部署到服务器时遇到了一些问题,在这里我就不再对原理进行阐释(复制)了,只写下一些关键环节,想看原理的同学请参考官网,此文章作 ...

  7. Oracle中建库时报Exception in thread main

    Linux操作系统上安装oracle 10g,在启动dbca的时候报 Exception in thread "main" 错误,详细内容如下: [oracle@centos ~] ...

  8. 全网代理公开ip爬取（隐藏元素混淆+端口加密）

    简述 本次要爬取的网站是全网代理,貌似还是代理ip类网站中比较有名的几个之一,其官网地址: http://www.goubanjia.com/. 对于这个网站的爬取是属于比较悲剧的,因为很久之前就写好 ...

  9. Redis从入门到精通：中级篇

    原文链接:http://www.cnblogs.com/xrq730/p/8944539.html,转载请注明出处,谢谢 本文目录 上一篇文章以认识Redis为主,写了Redis系列的第一篇,现在开启 ...

  10. How To Automate Disconnection of Idle Sessions

    ***Checked for relevance on 30-Apr-2012*** goal: How to automate disconnection of idle sessions fact ...