在做表单中会遇到各种浏览器，和各种意想不到的问题，在这里做一个小的总结
-
表单自动填充背景色
image.png
如果点击了保存用户名，浏览器是会自动填充表单的，也会填充默认的背景色通过添加样式可以解决这样的问题
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
box-shadow: 0 0 0 50px #fff inset;
}
效果如下：
-
input按钮样式问题
在ipad中input的type为button或submit的时候按钮会被渲染成模样的样式
image.png
解决办法
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
圆角的处理
.button{ border-radius: 0; }
-webkit-appearance: none;这句话的意思就是去除iOS的默认样式
-
还有用户名和密码保存的问题
关于浏览器自动填充表单的问题我都记录在这里可以自己查看//www.greatytc.com/p/0f4a2ab3388c 这里主要说的是但用户名和密码之间如果有其他的input框会导致浏览器将用户名记错的问题
如下面这样
image.png
浏览起将用户名记录成了短信验证码
解决办法，将短信验证码发在密码框下面，但是产品那边是不会通过的，只能是调整样式，页面的效果不变，只改样式和布局 -
在Safari中有两个问题比较啃爹了
第一个就是在input框中出现了通讯录头像的问题
image.png
出现在手机号和用户名这些地方是可以理解的，但他还会出现在验证码中，现在只能通过其他的元素覆盖解决
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
第二个，也是没有办法解决的一个问题
- 在ipad中的问题
第一点就是表单填充问题，如果用submit表单提交会导致提交后表单的用户名和密码会被自动填充的用户名覆盖，
解决办法，就使用其他按钮代替submit，点击触发submit提交
第二点是select()事件，在ipad中如果给input框添加focusin事件并且在里面添加了select()事件当失去光标的时候input 框就会被赋值两次
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
box-shadow: 0 0 0 1000px white inset;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #999;
line-height:14px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #999;
line-height:14px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #999;
line-height:14px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color:#999!important;
line-height:12px!important;
}
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
input[type="text"],input[type="password"] {
-webkit-appearance: none;
border-radius: 0;
}
/css去掉iPhone、iPad默认按钮样式/
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
border-radius: 0;
}
