谷歌浏览器对表单元素的默认设置

input元素自动填充

• 在使用谷歌浏览器浏览网页的过程中经常会保存用户名和密码，如果是多人共享的电脑，就会存在安全隐患；并且自动填充的背景的颜色无法自定义；

  
  
  image.png

• 解决方案：

  • autocompleted="off" 阻止自动填充

        <input type="text" name="username"  id="username"   autocompleted="off" />
        <input type="password" name="password" id="password" autocomplete="new-password" />

+ 通过边框阴影遮盖

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {   
      /*阴影大小等于input框宽度一半 利用内阴影覆盖原背景色*/
      box-shadow: 0 0 50px 50px rgba(32, 44, 58, 0.98) inset;
      /*利用文本填充属性覆盖原有文本颜色*/
      -webkit-text-fill-color: #fff;
}

+ 通过动画效果解决

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {   
        background: none !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 99999s ease-in-out 0s;
    -webkit-transition-delay: 99999s;
}
```css

## 表单元素默认边框
![image.png](https://upload-images.jianshu.io/upload_images/18792782-1d9edab96fc08d0b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

```css
      input:focus{ outline: none; }
      button:focus{ outline: none; }

自定义placeholder样式

/* 自定义placeholder 样式*/
input::-webkit-input-placeholder{
    color:#fff;
    font-size:16px;
}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#fff;
    font-size:16px;
}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#fff;
    font-size:16px;
}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */
    color:#fff;
    font-size:16px;
}