ios下输入框的适配问题

1. 黄色背景

在ios系统下input、textarea、select自动填充内容后，会出现黄色的背景：

解决办法：用足够大的box-shadow遮盖背景

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow:0 0 0px 1000px white inset !important;
}

 

 

2. 光标

有时候ios系统下运行移动端页面，输入光标会出现错位、放大的情况，影响美观。

解决办法：给输入框和字体大小相同的高度，剩下的高度在父盒子中用padding撑开：

.inputbox {
    height: 40px;
    padding: 6px 0px 10px 15px;
}
.inputbox input {
    height: 18px;
    font-size: 16px;
}