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

look_w

写在前面
    在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等。