写在前面
在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等。
网友评论