select下拉框、输入框在IOS中出现阴影

写在前面
在IOS浏览器中，select下拉框会出现如下效果：选择输入框上面会出现阴影。这种默认效果显然不是我们想要的。下面说一下解决方案。

解决方案

1、input：

设置input的样式时加上：-webkit-appearance: none，这样之后input输入框就会像Android上一样正常显示。

<input type="text" "name="name"  placeholder="用户名">
...
input[type="text"] {
  -webkit-appearance: none;
}

2、select：

同理，给select加上样式-webkit-appearance: none，但是加上样式之后在ios上不会显示后面的小三角形，需要自己来添加。

<select name="gender" class="select">
    <option value="">请选择</option>
    <option value="1">男</option>
    <option value="2">女</option>
</select>
...
.select {
  -webkit-appearance: none;
}

备注：

目前有许多前端封装好的UI库，非常好用，比如：cube-UI等。