来源：互联网 作者：佚名 时间：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. lombok安装与简易教程(一)

    lombok简单的来讲就是在编译的时候,可以帮助我们生成getter与setter等方法,减少代码量.这可是一个好东西啊 1.eclipse安装lombok java -jar lombok.jar ...

  2. 基于SSM框架实现简单的登录注册

    一.环境配置 工程目录 在pom.xml添加依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...

  3. 读书笔记-《Maven实战》-2018/4/17

    第五章 坐标和依赖 1.如同笛卡尔坐标系一样,Maven也通过坐标三元素定位一个资源. <groupId>com.dengchengchao.test</groupId> &l ...

  4. SQL执行SQL语句提示 "内存不足"(insufficient memory....)的解决方法

    由于本地执行的sql script的文件太大但是本地sql的运行内存有限,当我在MSSql的工具上运行这份178M左右的脚本的时候 它会提示 如下错误(Insufficient memory to c ...

  5. 继承自 DevExpress 17.2 的自定义控件如何在工具箱显示

    最近把DevExpress版本从13.1升级到了17.2,结果发现继承自DevExpress的自定义控件居然在工具箱中消失了,弄了两天还是没有任何头绪,部分自定义Dev控件可以正常出现,但大部分自定义 ...

  6. FJUT第四周寒假作业之第一集，临时特工？(深度优先搜索)

    原网址:http://210.34.193.66:8080/vj/Contest.jsp?cid=163#P2 第一集,临时特工? TimeLimit:1000MS  MemoryLimit:128M ...

  7. NLP系列(3)_用朴素贝叶斯进行文本分类(下)

    作者: 龙心尘 && 寒小阳 时间:2016年2月. 出处: http://blog.csdn.net/longxinchen_ml/article/details/50629110 ...

  8. 安卓高级3 RecyclerView 和cardView使用案例

    cardView: 添加依赖:在Studio搜索cardview即可 在V7包中 或者直接在gradle中添加 compile 'com.android.support:cardview-v7:24. ...

  9. java获取ip的方式，注意多级代理的方式获取

    public String getIP() { String clientIP = ServletActionContext.getRequest().getHeader("x-forwar ...

  10. XMPP 测试工具

    XMPP 测试工具(金庆的专栏 2016.10)XMPP的客户端Pidgin有个Debug Window, 可以显示所有发送和接收的xml节.但是无法发送任意的自定义节.<XMPP高级编程-使用 ...