时间戳

首页 > 解决方案 > 复选框自定义样式在 Mozilla Firefox 浏览器中不起作用

css - 复选框自定义样式在 Mozilla Firefox 浏览器中不起作用

问题描述

我正在尝试为复选框添加自定义样式，它在 Google Chrome 和 Safari 浏览器中都可以正常工作，但在 Mozilla Firefox 中不起作用。以下是我写的样式。

input[type='checkbox'] {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
    width: 13px;
    height: 13px;
    margin: 0;
    margin-right: 1px;
    display: block;
    float: left;
    position: relative;
    cursor: pointer;
}

input[type='checkbox']:after{
    content: "";
    vertical-align: middle;
    text-align: center;
    line-height: 13px;
    position: absolute;
    cursor: pointer;
    height: 25px;
    width: 25px;
    left: -2;
    top: -2;
    font-size: 10px;
    background: #fff;
    border: 1px solid #D5D8EC;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

// input[type='checkbox']:hover:after, input[type='checkbox']:checked:hover:after {
//  background: #fff;
//  content: url(../img/tick.png);
//  color: #000;
// }

input[type='checkbox']:checked:after{
    background: #fff;
    content: url(../img/tick.png);
    color: #000;
}

请帮助我

标签： csssass

解决方案

形式上，输入等元素不支持伪元素。参见例如https://developer.mozilla.org/en-US/docs/Web/CSS/::after

注意： ::before 和 ::after 生成的伪元素包含在元素的格式框中，因此不适用于替换元素，例如 , 或
元素。

然而，在某些情况下，某些浏览器似乎确实允许这样的伪元素，并且在这个问题的情况下，Safari 和 Chrome 在复选框类型的输入元素上实现伪元素。Firefox 没有，而且在这方面似乎更严格地遵循标准。

因此，问题是如何处理它？有各种技巧，其中之一是添加一个包含元素，例如跨度并给出所需的格式。这当然假设您可以控制 HTML

推荐阅读