(转)input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色

解决Chrome输入框的黄色背景与粗边框问题
本文介绍如何通过设置input元素的autocomplete属性为'off'来关闭自动完成功能,并添加outline:none样式以去除Chrome浏览器中输入框的黄色背景与粗边框,提升用户体验。
chrome的input去黄色背景方法:
chrome默认的黄色背景色,还有选中时周围会有很粗的边框。
很粗的边框让它的黄色背景给挡住啦。这个我gg了一下,然后看老外的写法搞定啦。
去掉这个黄色背景,给input添加autocomplete='off'也就是把他的自动完成关闭了。
去掉很粗的边框,给input添加outline:none;
<!DOCTYPE html> <html> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="watch" content="default"> <meta name="theme" content="custom"> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript" src="themes/layui/lay/dest/layui.all.js"></script> <script type="text/javascript" src="script/jsencrypt.min.js"></script> <!-- <script type="text/javascript" src="script/index.js"></script> --> <script type="text/javascript" src="script/indexs0.js"></script> <meta charset="UTF-8"> <title>登录</title> <style> body { overflow: hidden; /*background-image: url(image/dbj.jpg);*/ background-image: url(image/bg.jpg); background-position-y: -60px; background-size: 100% 100%; /*background-size: cover;*/ } .header { margin-top: 40px; padding-bottom: 50px; margin-left: 40px; } .login { margin: 0 auto; display: inline; } .conti { width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .login_bg { position: absolute; width: 624px; text-align:center; padding:80px 0; /*top:50%;*/ /*left:35%;*/ right: 218px; /*margin: -15% 0 0 -25%;*/ box-shadow: 2px 2px 2px 2px 0.3; border-radius: 4px; background:#fff; overflow: hidden; } .logo-box { width: 200px; height: 52px; overflow: hidden; margin: 0 auto; } .logo-box img { width: 100%; height: 100%; box-sizing: border-box; display: block; } .zhubiaoti { width: 100%; height: 54px; margin-bottom:50px; line-height: 54px; font-family: "Source Han Sans CN"; font-size: 36px; font-weight: 500; font-style: normal; /*letter-spacing: 100;*/ color: #333; } .biaoti-img { width: 216px; height: 54px; } .group_user { font: 18px 微软雅黑; } .group_user h1 { font: 20px 微软雅黑; color: #ffffff; border-bottom: 1px rgba(255, 255, 255, 0.25) solid; padding: 5px; margin-bottom: 28px; } .group_input { width: 100%; margin: 0 auto; } .group_user { width: 100%; } .name { color: #ffffff; font-size: 16px; margin: 5px 0; width: 100%; } .group_user input { width: 80%; height: 40px; padding: 0 20px; } .name .name_pwd { margin-top: 5px; margin-left: -10px; } .btn { margin-left: 50px; padding: 6px; } .btn1 { width: 469px; height: 68px; background: #2E47C9; margin: 56px 0 0 77px; text-align: center; line-height: 70px; border-radius: 10px; cursor: pointer; } input { outline: none; } .btn11 { width: 469px; height: 68px; background-color: #fff; margin-left: 77px; margin-bottom: 32px; border-radius: 10px; border: none; line-height: 68px; border: 1px solid #2E47C9; /*font-family: "微软雅黑";*/ text-indent: 20px; } .toptt1 { width: 100%; line-height: 100px; padding-top: 30px; } .div1 { width: 130px; height: 70px; line-height: 100px; display: inline; } .div2 { width: 300px; height: 70px; line-height: 100px; display: inline; } .name_user { background-size: 5%; border: none; } .name_pwd { background-size: 5%; border: none; margin: 0 auto; } .leftbar { float: left; margin-top: 85px; width: 60%; } /*.leftbar img{ margin-left:82px; width:90%;height:425px;margin-top:-55px;} .footer img{ }*/ .footer { text-align: center; height: 100px; width: 100%; background: url(image/bg3.png) no-repeat; background-size: 100% 100%; position: fixed; bottom: 0; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #fff; } .btnlogin { color: #fff; /*border-radius:10px;*/ font-size: 26px; cursor: pointer; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } </style> <script type="text/javascript"> $(document).ready(function () { $('body').css('height', $(window).height()); $('body').css('width', $(window).width()); $('.conti').css('height', $(window).height()); $('.conti').css('width', $(window).width()); }) $(window).resize(function () { $('body').css('height', $(window).height()); $('body').css('width', $(window).width()); $('.conti').css('height', $(window).height()); $('.conti').css('width', $(window).width()); }) $(function () { $('#dcz-input-1').css('border-color', '#2E47C9') }); function onInputFocus(id) { $('#' + id).focus() if (id == 'user_name') { $('#dcz-input-1').css('border-color', '#2E47C9') } else if (id == 'user_password') { $('#dcz-input-2').css('border-color', '#2E47C9') } else if (id == 'user_yzm') { $('#dcz-input-3').css('border-color', '#2E47C9') } } function onInputBlur(id) { $('#' + id).css('border-color', '#CDCDCD') } </script> </head> <body> <!-- <div class="header">--> <!-- <img src="image/logo.png" alt="" /> --> <!-- </div>--> <div class="bg_img"> <!--header--> <!--用户登录--> <div class="conti"> <div class="login_bg"> <div class="zhubiaoti"> 中交智运运输监管平台 </div> <form class="group_input"> <div class="group_user"> <div class="btn11" id="dcz-input-1" onclick="onInputFocus('user_name')"> <input id="user_name" autocomplete="off" class="name_user" type="text" name="code" onblur="onInputBlur('dcz-input-1')" aria-label="用户名" placeholder="请输入用户名"> </div> <div class="btn11" id="dcz-input-2" onclick="onInputFocus('user_password')"> <input id="user_password" class="name_pwd" type="password" name="passwd" aria-label="密码" onblur="onInputBlur('dcz-input-2')" placeholder="请输入密码" autocomplete="off"> </div> <div class="btn1" id="logonbtn"> <p class="btnlogin">登  录</p> </div> </div> </form> </div> </div> </div> </body> </html>这个页面做适配
最新发布
10-16
<!DOCTYPE html> <html> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="sid" content="default"> <meta name="theme" content="custom"> <script type="text/javascript" src="script/jquery.min.js"></script> <script type="text/javascript" src="themes/layui/lay/dest/layui.all.js"></script> <script type="text/javascript" src="script/jsencrypt.min.js"></script> <script type="text/javascript" src="script/vue.min.js"></script> <!-- <script type="text/javascript" src="script/index.js"></script> --> <script type="text/javascript" src="script/co_indexs.js"></script> <meta charset="UTF-8"> <title>登录</title> <style> * { box-sizing: border-box; } body { overflow: hidden; background-color: #fff; background-image: url(image/puhuodenglu.png); /*background-position-y:-60px;*/ background-size: 100% 100%; } .ph-login { width: 100%; height: 100%; /*position: relative;*/ display: flex; justify-content: center; align-items: center; } .center-box { width: 1411px; height: 680px; /*position: absolute;*/ /*top: 200px;*/ /*right: 290px;*/ display: flex; margin: auto; flex-direction: row; justify-content: flex-start; } .left-img-box { width: 898px; height: 680px; border-radius: 48px 0 0 48px; background: linear-gradient(60.88deg, #035BF5 2.68%, #2796FD 82.94%); border: 1px solid #0D98FF; border-right: none; } .wuliu-img { width: 827px; height: 637px; margin: 21px 35px; background-image: url(image/puhuologin.png); background-size: 100% 100%; } .right-form-box { width: 512px; height: 680px; border-radius: 0 48px 48px 0; background: rgba(255, 255, 255, 0.19); backdrop-filter: blur(6px); display: flex; flex-direction: column; justify-content: flex-start; padding-left: 55px; border: 1px solid rgba(255, 255, 255, 0.89); border-left: none; } .title-text { font-size: 36px; color: #FFFFFF; margin-top: 78px; } .white-box { background: #FFFFFF; width: 406px; height: 68px; border-radius: 10px; padding-left: 21px; padding-top: 22px; margin-top: 32px; } .bot-margin-12 { margin-bottom: 12px; } .lxfs_box { width: 400px; height: 24px; margin: 0 50px 20px 90px; font-size: 14px; color: #FFFFFF; display: none; } .yzm-box { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-top: 20px; } .yzm-input-box { width: 234px; height: 68px; background: #FFFFFF; border-radius: 10px; padding: 22px 0 22px 21px; } .yzm-btn-box { display: flex; flex-direction: column; justify-content: flex-start; margin-left: 17px; } .yzm-btn { width: 155px; height: 46px; background: #007DFF; border-radius: 5px; color: #FFFFFF; font-size: 16px; display: flex; justify-content: center; align-items: center; margin-bottom: 4px; } .cursorP { cursor: pointer; color: #FFFFFF; } .cursorNo { cursor: not-allowed; color: #F8F8FF; } .tishi-text { font-size: 12px; color: #FFFFFF; display: flex; justify-content: center; align-items: center; } .login-btn { width: 406px; height: 68px; background: linear-gradient(0deg, #035BF5 -33.82%, #2998FD 108.82%); display: flex; flex-direction: row; justify-content: center; align-items: center; font-size: 26px; color: #FFFFFF; border-radius: 10px; margin-top: 40px; cursor: pointer; } .no-border { border: none; } input { outline: none; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #fff; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } </style> <script type="text/javascript"> $(document).ready(function () { $('body').css('height', $(window).height()); $('body').css('width', $(window).width()); }) $(window).resize(function () { $('body').css('height', $(window).height()); $('body').css('width', $(window).width()); }) function onInputFocus(id) { $('#' + id).focus() } </script> </head> <body> <div class="ph-login" id="ph_login"> <div class="center-box"> <div class="left-img-box"> <div class="wuliu-img"></div> </div> <div class="right-form-box"> <div class="title-text">欢迎登录</div> <input id="cylx" type="hidden" value="3GF4BE5H" /> <div class="white-box" onclick="onInputFocus('user_name')"> <input id="user_name" autocomplete="off" class="no-border" placeholder="请输入账号" type="text" name="code" aria-label="账号"> </div> <div class="white-box bot-margin-12" onclick="onInputFocus('user_password')"> <input id="user_password" class="no-border" autocomplete="off" placeholder="请输入密码" type="password" name="passwd" aria-label="密码"> </div> <div id="lxfs_id" class="lxfs_box"> </div> <div class="yzm-box"> <div class="yzm-input-box" onclick="onInputFocus('user_yzm')"> <input id="user_yzm" class="no-border" name="yzm" aria-label="验证码" placeholder="请输入验证码" autocomplete="off" type="text"> </div> <div class="yzm-btn-box"> <div class="yzm-btn" id="yzmbtn"> 发送验证码 </div> <div class="tishi-text"> 验证码当天内有效 </div> </div> </div> <span style='font-size:14px;color:red;padding-top:5px;display:inline-block' id='tsy'>温馨提示:若没有收到验证码,请输1234</span> <div class="login-btn" id="logonbtn"> 登录 </div> </div> </div> </div> </body> </html>让页面适配笔记本
10-16
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值