浏览器兼容下的css

小南瓜地

已于 2022-03-17 16:28:15 修改

阅读量105

点赞数

分类专栏： css 浏览器兼容文章标签： javascript 开发语言 ecmascript

于 2022-03-16 16:20:22 首次发布

本文链接：https://blog.csdn.net/weixin_44996782/article/details/123529202

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

浏览器兼容

1 篇文章 0 订阅

订阅专栏

本文介绍了在火狐浏览器中遇到CSS伪类样式不显示的问题，以及解决方案。通过添加`-moz-appearance:none;`来移除默认样式，使自定义样式生效。同时展示了修改后的CSS代码，确保在火狐和谷歌浏览器中一致显示。

摘要由CSDN通过智能技术生成

问题描述:火狐浏览器下伪类不显示
在这里插入图片描述火狐

在这里插入图片描述谷歌

原代码

<style lang="stylus">
 	input[type=checkbox]
        cursor: pointer
        position: relative
        width: 15px
        height: 10px
        font-size: 14px
    
    
    input[type=checkbox]::after
        content: ""
        display: inline-block
        position: absolute
        top: 0
        background-color: #12228C
        color: #FFFFFF
        width: 20px 
        height: 20px 
        visibility: visible
        padding-left: 0px
        text-align: center
        border: 1px solid #8294ff
        line-height: 20px
    
    input[type=checkbox]:checked::after
        content: '✓'
        font-size: 12px
        font-weight: bold
</style>

参考修改checkbox 的样式
解决方法：

<style lang="stylus">
 	input[type=checkbox]
 		//将input标签变成一个可修改样式的普通标签
 		-moz-appearance: none;
        cursor: pointer
        position: relative
        width: 15px
        height: 10px
        font-size: 14px
    
    
    input[type=checkbox]::after
        content: ""
        display: inline-block
        position: absolute
        top: 0
        background-color: #12228C
        color: #FFFFFF
        width: 20px 
        height: 20px 
        visibility: visible
        padding-left: 0px
        text-align: center
        border: 1px solid #8294ff
        line-height: 20px
    
    input[type=checkbox]:checked::after
        content: '✓'
        font-size: 12px
        font-weight: bold
</style>