美文网首页
select下拉框、输入框在IOS中出现阴影

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

作者: Yuhoo | 来源:发表于2018-10-08 18:00 被阅读0次

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

相关文章

网友评论

      本文标题:select下拉框、输入框在IOS中出现阴影

      本文链接:https://www.haomeiwen.com/subject/ilmjaftx.html