标签：浏览器 chrome 表单 color autofill internal webkit input

问题

chrome 浏览器中，表单会默认填充样式：

input:-internal-autofill-selected {
    
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: -internal-light-dark(black, white) !important;
}

解决

1、通过纯色的阴影覆盖底色

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    /*覆盖背景颜色*/
    -webkit-box-shadow: 0 0 0px 1000px #e4e8f4 inset;
   /*字体颜色重置*/
    -webkit-text-fill-color: #c62222;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

注: 这种只适用于纯色背景的输入框, 无法设为透明.

2、关闭这个功能

<!-- 对整个表单的设置 -->
<form autocomplete="off">
<!-- 单独对某个组件设置 -->
<input type="text" autocomplete="off">

转自：
chrome 浏览器表单自动填充默认样式 - autofill

标签：浏览器,chrome,表单,color,autofill,internal,webkit,input
来源： https://www.cnblogs.com/jiajia-hjj/p/15467281.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。