<!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. 基于SSM的租赁管理系统1.0_20161225_框架搭建

    搭建SSM底层框架 1. 利用mybatis反向工程generatorSqlmapCustom完成对数据库十表的映射 generatorConfig.xml <?xml version=&quo ...

  2. Django框架-目录文件简介

    Rhel6.5 Django1.10 Python3.5 Django框架-目录文件简介 1.介绍Django Django:一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django, ...

  3. 【体系结构】动态调度算法：记分牌算法和tomasulo算法

    记分牌和tomasulo算法 动态调度: 通过硬件在程序执行时重新安排代码的执行序列来减少竞争引起的流水线停顿时间 动态调度流水线具备以下功能: (1)允许按序取多条指令和发射多条指令----取指(I ...

  4. postgresql 常用数据库命令

    连接数据库, 默认的用户和数据库是postgrespsql -U user -d dbname 切换数据库,相当于MySQL的use dbname\c dbname列举数据库,相当于mysql的sho ...

  5. 浅谈WEB前后端分离

    重审业务逻辑 用过MVC的童鞋都知道业务逻辑(Bussiness Logic),但是大多对这概念又是模棱两可,业务逻辑从来都是这样难以理解,谈论前后端分离之前这个概念非常有必要探讨一下! 在简单的CR ...

  6. IIS上虚拟站点的web.config与主站点的web.config冲突解决方法 分类： ASP.NET 2015-06-15 14:07 60人阅读 评论(0) 收藏

    IIS上在主站点下搭建虚拟目录后,子站点中的<system.web>节点与主站点的<system.web>冲突解决方法: 在主站点的<system.web>上一级添 ...

  7. Android下的屏幕适配

    1080 100dp 300px720 100dp 200px 300px 1080px 比例是300/1080=0.277200px 720px

  8. LINUX 根目录说明

    linux目录:/bin      bin是Binary的缩写.这个目录存放着最经常使用的命令./boot 这里存放的是启动Linux时使用的一些核心文件,包括一些连接文件以及镜像文件./data / ...

  9. Python学习日志（三）

    运算补充(因为之前看书看过的我又忘了...) python3 里 / 直接是浮点除.python2的 / 是直接整除,取整数部分,小数不要了,python3也可以这样整除,用//实现. **是乘方!! ...

  10. ShowMessageFmt 用法

    举例:ShowMessageFmt('n1:%x; n2:%x', [n1,n2]);  显示Params 为 array[integer] of TvarRec 进制表示 %o(8)   print ...