select下拉框适配苹果手机

最近有做到一个移动端的省市级联,写之前忽略了苹果手机对于select设置的默认样式,完成后苹果手机上面的效果很丑。
苹果默认样式

和设计稿完全不符合,所以在简书上记录下解决办法,提醒自己不要再忘记了。

 select{
    -webkit-appearance: none;  
    /*清除select默认样式*/
    background: url("../../images/icon1.png")no-repeat right;
    /*注:上一步清除样式后,select中的三角符号也会被清除,所以需要自己添加下三角,我在此出用一个下三角背景图片填充*/
    background-size: 0.3rem;
    background-position: 70% 50%;
}

当然这样写之后,就相当于重置了整个select的样式了,需要怎样的下拉框,就按照设计稿得样式实现就好了,苹果手机和安卓手机也不会存在差异了。


修改后的样式
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • 相关知识点 移动端、 适配(兼容)、 ios点击事件300ms延迟、 点击穿透、 定位失效...... 问题&解决...
    sandisen阅读 25,664评论 3 67
  • Android UI相关开源项目库汇总OpenDigg 抽屉菜单MaterialDrawer ★7337 - 安卓...
    黄海佳阅读 8,782评论 3 77
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,964评论 2 17
  • 亲爱的妞, 今天下午,妈妈陪你去读书,去体验了下两个新老师的教学风格和教学体系。两门课各两个小时,上下来整体感觉还...
    LianaLL阅读 163评论 0 0