zoukankan      html  css  js  c++  java
  • chrome自动填表会遮挡input中背景图的问题解决方法

    在做某项目登录界面时,发现用户密码框在Chrome自动填充时,input中的背景框会被遮住。网上也搜了一下,没有一个有效的解决方法。

    来看csdn的登录界面,也有这个问题。

    后来在浏览网页时,无意中发现某网站的登录页面没有这个问题,于是分析了下它的css,照着试了一下,真的完美解决。我做的效果:

    原理很简单,下面一个 div,上面放 div(显示图片) + input,把图片div放在input的上面。

    图片div的css:

    .user {background:url("/images/login/icon_user.png");background-repeat:no-repeat; background-position: 5px center;}
    .icon-position {z-index:3;position:relative;height:40px;28px;}

    输入框的css:

    .input-position {margin-top:-40px;padding-left:34px;340px;}
    .input-style {border:1px solid #dedede;border-radius:4px;font-size:14px;font-family:微软雅黑,黑体;vertical-align:middle;height:40px;line-height:40px;outline:0px;}

    HTML片段:

    <div>
       <div class="user icon-position"></div>
       <input type="text" class="input-position input-style" name="username" id="username" placeholder="登录账号">
    </div>
  • 相关阅读:
    LVS Nginx和HAproxy的区别,怎么选择最好
    PXE+kickstart自动化安装
    DHCP服务搭建
    自动化安装
    Zabbix trigger(触发器)设置
    Zabbix Agent 安装指南和 Zabbix Server 设置自动发现
    Zabbix Server安装指南
    MariaDB安装
    事件绑定
    事件驱动式
  • 原文地址:https://www.cnblogs.com/phpdragon/p/7569911.html
Copyright © 2011-2022 走看看