CSS safari 浏览器的几个样式兼容问题

1. safari input框type["password"] type["text"] 聚焦后右侧出现图标

input::-webkit-credentials-auto-fill-button , // password
input::-webkit-contacts-auto-fill-button { // other
   display: none !important;
   visibility: hidden;
   pointer-events: none;
   position: absolute; /* 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */
   right: 0;
}

2. safari 浏览器 input 框光标放大，输入文字后不居中样式解决

input {
  line-height: normal;
  vertical-align: middle;
}

3. 去掉阴影属性

注意非 radio，否则就不能正常显示 radio

input[type="text"], input[type="button"], input[type="submit"], input[type="password"], button, textarea {
  -webkit-appearance: none;
}

4. safari 去除自动填充后有系统自带的背景色

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
  -webkit-box-shadow: 0 0 0 1000px #fff inset!important;
  background-color: #fff !important;
  background-clip: content-box !important;
  -webkit-text-fill-color: #fff!important;
}

兼容ie判断

除IE外都可识别