<!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. oracleDBA-D2

    1.超级管理员sys和system的区别: sys权限比system大,system无法查看到当前数据库是否运行在归档模式下,无法关闭数据库.sys是老大,system是老二. 2.OEM-oracl ...

  2. 文件描述符、文件表项指针、inode节点的关系

    内核使用3种数据结构表示打开的文件,他们之间的关系决定了在文件共享方面一个进程对另一个进程的影响. (1) 每个进程在进程表中都有一个纪录项,纪录项中包含一张打开文件描述符表,每个文件描述符各占一项, ...

  3. oh my zsh

    简单使用oh my zsh 安装oh my Zsh 安装zsh 安装curl或者wget 下载并安装oh my zsh: curl 下载方式curl -L https://raw.github.com ...

  4. mysql 有报错　 ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql) exists

    sh-4.1# /etc/init.d/mysqld status ERROR! MySQL is not running, but lock file (/var/lock/subsys/mysql ...

  5. 与你相遇好幸运，gen8安装

    gen8到手后,立马去买了 SSD https://item.jd.com/2010277.html 支架 https://item.jd.com/2671609.html NAS盘 https:// ...

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

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

  7. 【Java EE 学习 68】【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】

    单点登录:SSO(Single Sign On) 什么是单点登录:大白话就是多个网站共享一个用户名和密码的技术,对于普通用户来说,只需要登录其中任意一个网站,登录其他网站的时候就能够自动登陆,不需要再 ...

  8. Microsoft Visual Studio 工程属性表props/vsprops创建与使用

    props/vsprops:工程属性表文件(project property sheet) 后者为vs2008的,前者为vs2010及以后版本的,其主要包含工程属性配置相关,可以单独提取出来供不同工程 ...

  9. Android 利用ImageView显示图片

    Author: Maddock Date: 2015-07-21 因为做算法demo的需要,开发一点安卓的程序. 需求:获取UI中图像中某点的坐标. 参考:http://longshuai2007.b ...

  10. Eclipse '/RemoteSystemsTempFiles'错误

    错误代码 Could not write metadata for '/RemoteSystemsTempFiles'.D:\workspace4.5\.metadata\.plugins\org.e ...