<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>input框的focus美化效果</title>

    <link href="lt.css" rel="stylesheet" type="text/css"/>

    <style>

        ul{width: 260px;margin: 10px auto;}

        ul li{width:260px;height:60px;line-height: 60px;}

        input{

            border: 1px solid #ccc;

            border-radius: 2px;

            color: #000;

            font-family: 'Open Sans', sans-serif;

            font-size: 1em;

            height: 50px;

            padding: 0 16px;

            transition: background 0.3s ease-in-out;

            width: 100%;

        }

        input:focus {

            outline: none;

            border-color: #9ecaed;

            box-shadow: 0 0 10px #9ecaed;

        }

        .button{

            -webkit-appearance: none;

            background: #009dff;

            border: none;

            border-radius: 2px;

            color: #fff;

            cursor: pointer;

            height: 50px;

            font-family: 'Open Sans', sans-serif;

            font-size: 1.2em;

            letter-spacing: 0.05em;

            text-align: center;

            text-transform: uppercase;

            transition: background 0.3s ease-in-out;

            width: 292px;

        }

        .button:hover {

            background: #00c8ff;

        }

    </style>

</head>

<body>

    <ul>

        <li>

            <input type="text" placeholder="用户名" autocomplete="on"/>

        </li>

        <li>

            <input type="text" placeholder="密码" autocomplete="off"/>

        </li>

        <li>

            <input type="text" placeholder="手机号码" autocomplete="off"/>

        </li>

        <li>

            <input type="text" placeholder="邮箱" autocomplete="off"/>

        </li>

        <li>

            <input type="submit" class="button" title="注册" value="注册">

        </li>

    </ul>

</body>

</html>

效果图：

IT技术和行业交流群 417691667

input框focus时的美化效果的更多相关文章

  1. 去掉input获取focus时的边框

    贴图,问题如下: 尽管已经设置输入框的border为none,当输入框focus时扔会出现浏览器自带的边框 解决方法,添加如下样式即可,.fs_input为输入框样式 ---------------- ...

  2. 安卓input框获取焦点时，底部按钮会顶上去的解决方法

    var h = document.body.scrollHeight;window.onresize = function(){ if (document.body.scrollHeight < ...

  3. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  4. 小程序登录时如何获取input框中的内容

    最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...

  5. js—input框中输入数字，动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  6. 解决Bootstrap布局注册表单input标签前增加必填项*提示与input框不在同一行问题

    注册表单部分代码如下: <form id="registForm" class="form-horizontal" action="${page ...

  7. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  8. 前端input选中状态时的蓝框

    input标签在选中状态时,我们的浏览器不同时,会有不同效果. 一般我们chrome时可能会没有这个效果,但是如果是safari时,这个效果就... 这时为了达到效果统一,我们不得不去掉这个蓝框,就要 ...

  9. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

随机推荐

  1. java的异常总结

    异常:在java程序中也出现不正常的情况,这个就叫异常.java是面向对象的语言.任何事物都可以用类来描述,同样异常也是一种事物,java中提供了很多异常类 很多异常堆积起来叫做异常体系 Throwa ...

  2. python之路:Day04 --- Python基础4

    本节内容 1.字符串格式化 2.迭代器和生成器 3.装饰器 4.Json & pickle 数据序列化 5.软件目录结构规范 一.字符串格式化 百分号式 %[(name)][flags][wi ...

  3. ***git自动化部署总结

    在网上搜了一堆没用找到太仔细的教程,于是花费2天时间,自己研究了下.现在分享如下: 思路:利用crontab定时去去执行git pull脚本 首先,用git clone命令将中央库的代码下载到阿里云 ...

  4. oracle表分区以及普表转分区表（转）

    概述 Oracle的表分区功能通过改善可管理性.性能和可用性,从而为各式应用程序带来了极大的好处.通常,分区可以使某些查询以及维护操作的性能大大提高.此外,分区还可以极大简化常见的管理任务,分区是构建 ...

  5. Linux下Keepalived+LVS-DR模式配置高可用负载均衡集群

    一.环境说明:     操作系统:Centos-6.5_x86_64    keepalived软件安装在node2和node3机器上.     实际安装之前,先关闭keepalived节点(node ...

  6. Conditional project or library reference in Visual Studio

    Conditional project or library reference in Visual Studio In case you were wondering why you haven’t ...

  7. ubuntu_nfs搭建

    搭建步骤: 1.sudo apt-get install nfs-kernel-server 2.执行命令:mkdir /home/wmx/Desktop/nfs 搭建一个nfs服务专有的文件夹,这里 ...

  8. 【CentOS】LAMP相关2

    ////////////////配置Apache//////////////////////////// 拿一个discuz来演示 LFS是什么,然后去掌握以下吧,对我们的提升很大?????听说广州的 ...

  9. iOS Swift 数组 交换元素的两种方法

    swap(&arr[fromIndexPath.row], &arr[to.row]) (arr[fromIndexPath.row],arr[to.row]) = (arr[to.r ...

  10. HashMap的内部实现机制，Hash是怎样实现的，什么时候ReHash

    1.HashMap的内部实现机制 HashMap是对数据结构中哈希表(Hash Table)的实现,Hash表又叫散列表.Hash表是根据关键码Key来访问其对应的值Value的数据结构,它通过一个映 ...