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：Checkbox

<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为＆＃34;灵感＆＃34;！

自定义复选框在Chrome和Safari中工作，但不适用于Firefox和IE

1 个答案: