<!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. SQL多表查询，消除表中的重复的内容

    看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...

  2. SQL添加维护 计划失败

    在sql要求数据库每天自动备份这个是大家都会遇到的问题,我遇到了这个问题如图: 是因为这个服务组件没有安装

  3. 基于SSM的租赁管理系统1.0_20161225_框架搭建

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

  4. UWP学习记录2-设计和UI之布局

    UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...

  5. MyBatis获取插入记录的自增长字段值

    在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“keyProperty”,其中keyProperty是Java对象的属性名! <insert id=" ...

  6. URL

    URL的格式:protocol :// hostname[:port] / path / [;parameters][?query]#fragment URL出现了有+,空格,/,?,%,#,& ...

  7. Swift -运算符和循环结构

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4dbf56 } p.p2 { margin: 0.0px 0. ...

  8. 【CentOS】LAMP相关2

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

  9. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  10. angularJS（7）

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...