电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: select下拉框、输入框在IOS中出现阴影 [打印本页]

作者: look_w 时间: 2019-3-11 20:40 标题: 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等。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)