html - 自定义复选框适用于 Chrome 和 Safari 但不适用于 Firefox 和 IE

Question

我创建了一个自定义复选框，基本上在复选框内有一个图标。该图标是来自 flaticon 的字体，因此我可以轻松更改大小和颜色。不幸的是，该复选框在 Chrome 和 Safari 中显示，但在 Firefox 和 IE 中不显示。

这是我的代码示例:

CSS:自定义复选框

#checkicons input[type=checkbox]{
  visibility: hidden*/
  height: 80px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after, input[type=checkbox]:after{
  visibility: visible;
  font-size:50px;
  margin-left: -36px;
  padding: 15px;
  border-radius: 8px;
  line-height: 1.4;
}

#checkicons input[type=checkbox]:checked:after{
  color: white;
  border: solid black;
  background-color: #1e6e11;
  border-width: 1px;
}

#checkicons input[type=checkbox]:after{
  color: #1e6e11;
  border: solid #1e6e11;
  background-color: white;
  border-width: 1px;
}

#checkicons label{
    max-width: 90px;
}

HTML:复选框

<div id="checkicons">
  <input type="checkbox" class="flaticon-leisure4" id="housecare" name="housecare" onchange="toggleDiv(this)"></input><br>
  <label for="housecare">House care</label>
</div>

CSS:Flaticon

@font-face {
    ...url to fonts...
    font-weight: normal;
    font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
  font-family: Flaticon;
  .flaticon-leisure4:after {
  content: "\e00f";
}

我在尝试解决此问题时对代码进行了一些测试。 Firefox 和 Safari 上的行为与我删除复选框 html 中的类一样。

这里我有两张结果截图。第一个是使用 chrome，第二个是不能使用 firefox 和 IE 的版本，这与我从 html 中删除代码“class="flaticon-leisure4"'的结果相同。

Result on Chrome, Safari

Result on Firefox, IE

如果我能解决这个问题或者你能给我其他建议，我会很高兴。

Answer 1

伪元素只适用于容器元素。因此，我将自定义复选框更改为标签。我只是遵循代码而不是自定义复选框

CSS:自定义图标

#checkicons .icon{
    max-width: 90px;
    font-family: Flaticon;
  font-size:50px;
  margin-left: -36px;
  padding: 5px 15px 5px 15px;
  border-radius: 8px;
  line-height: 1.4;
    color: #1e6e11;
  border: solid black;
  background-color: white;
  border-width: 1px;
}

新的 HTML

<input type="checkbox" id="housecare" name="housecare" onchange="toggleDiv(this); toggleIcon('houseCareIcon')">
    <label for="housecare" id="houseCareIcon" name="houseCareIcon" class="flaticon-leisure4 icon"></label>
    <label for="housecare">House Care</label>
</input>

现在使用 JavaScript 处理标签应该看起来像已选中还是未选中的颜色处理。

Javascript:检查颜色处理

function toggleIcon(obj, checkobj){
    if(document.getElementById(checkobj.id).checked){
        document.getElementById(obj).style.color='white';
        document.getElementById(obj).style.backgroundColor='#1e6e11';
    }else{
        document.getElementById(obj).style.color='#1e6e11';
        document.getElementById(obj).style.backgroundColor='white';
    }
}

感谢 Hidden Hobbes 的“灵感”!