ios系统中input type=text/radio/checkebox取消默认样式

悸动菌之梦

于 2017-10-27 09:49:01 发布

阅读量5.3k

点赞数

分类专栏： css 前端开发文章标签： ios checkbox iphone 前端开发

本文链接：https://blog.youkuaiyun.com/weixin_38597686/article/details/78361354

版权

前端开发同时被 2 个专栏收录

4 篇文章

订阅专栏

css

1 篇文章

订阅专栏

在iPhone的iOS系统中，遇到radio和checkbox控件无法去除默认边框的问题。通过设置border：none，并加上！important以确保样式优先级，可以成功解决这一兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：iPhone里面radio和checkbox按钮的轮廓去不掉。
就像下面这样，下面抛代码

input[type=radio],input[type=checkbox]{
            background: url("images/check.png") no-repeat center/0.8rem 0.8rem;//未选中的背景图片
            -webkit-appearance: none;//去掉默认样式
            height:1rem;
            margin: 0 .4rem 0.1rem .3rem;
            width:1rem;
            border-radius: 0;
            border: none !important;//去掉边框
        }
        form input[checked]{
            -webkit-appearance:none;//去掉默认样式
            background: url('images/checked.png') no-repeat center/0.8rem 0.8rem;//选中时的背景图片
        }