css - 自定义复选框在 Firefox 上不起作用

Question

我用 FontAwesome 自定义了我的复选框，但它只适用于 Chrome...

我把它放在我的页面上:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

<input type="checkbox" id="checkbox_cd" class="custom-checkbox" />

这是我的 CSS:

/*
input.custom-checkbox {
    visibility: hidden;
}
*/
input.custom-checkbox:checked::after, input.custom-checkbox::after {
    visibility: visible;
    font-family: FontAwesome;
    font-size: 60px;
    background-color: transparent;
    display: inline-block;
}

input.custom-checkbox:checked::after {
  content: '\f058';
  color: #16A085;
}

input.custom-checkbox::after {
  content: '\f057';
  color: #C0392B;
  position: relative;
  bottom: 5px;
}

jsfiddle

谢谢，

Answer 1

在 firefox 中，::before 或::after 不会处理输入。您需要使用标签而不是输入。

让我们使用这些 -

input.custom-checkbox + label::before
input.custom-checkbox:checked + label::after

谢谢