<!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. code first提示已有打开的与此 Command 相关联的 DataReader，必须首先将它关闭解决方法

    使用codefirst查询当然是必不可少的,但有时不小心可能很简单的查询也会导致异常. 下面用codefirst做个示例简单演示下异常发生的场景: var attendlist = db.Databa ...

  2. vim 加行号 和取消行号

    :set nu #是加行号 :set nonu #是去掉行号

  3. 手机开发中的AP与BP的概念

    转自:http://blog.csdn.net/macong01/article/details/15504611 手机的AP和BP: AP:ApplicationProcessor,即应用芯片 BP ...

  4. expect命令问题1

    [root@localhost scripts]# cat exptest.sh #!/usr/bin/expect spawn ssh root@127.0.0.1 expect "pas ...

  5. STC系列STC10F芯片解密STC10L单片机破解复制技术

    STC系列STC10F芯片解密STC10L单片机破解 STC10F12XE | STC10F12 | STC10F10XE | STC10F10解密 STC10F08XE | STC10F08 | S ...

  6. WebGL入门教程(一)-初识webgl

    一.WebGL和传统网页的区别: 普通网页组成成分:HTML.JavaScript: WebGL网页组成成分:HTML5.JavaScript和GLSL ES(着色器语言 OpenGL ES): 二. ...

  7. 微信测试服务器验证sha1加密法，工具类

    1 package org.fc.Util; import java.security.MessageDigest; import java.security.NoSuchAlgorithmExcep ...

  8. BZOJ 1047 二维单调队列

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 题意:见中文题面 思路:该题是求二维的子矩阵的最大值与最小值的差值尽量小.所以可以考 ...

  9. C#获取当前程序运行路径的方法集合

    //获取当前进程的完整路径,包含文件名(进程名).string str = this.GetType().Assembly.Location;result: X:\xxx\xxx\xxx.exe (. ...

  10. mac homebrew的用法

    与 MacPorts 类似,OS X 下还有款包管理工具为 Homebrew,安装方法也很简单. ruby -e "$(curl -fsSL https://raw.github.com/H ...