离子图标代替收音机/复选框 - 在 Firefox 中不可见，但在其他浏览器上工作

Question

我有以下CSS将std复选框/单选按钮替换为ionicons：

/* CSS RADIO BUTTONS */
.checkbox-icon:hover,
.radio-icon:hover {
  cursor: pointer;
}
.checkbox-icon:before,
.radio-icon:before {
  visibility: visible;
  font-size: 20px;
  line-height: 13px !important;
}
.checkbox-icon.ion-android-checkbox-outline-blank:checked:before {
  content: "f374";     // icon for selected
  font-size: 20px;
  color: @light-blue;
}
.radio-icon.ion-ios-circle-outline:checked:before {
  content: "f120";     // icon for selected
  font-size: 20px;
  color: @light-blue;
}
input[type=checkbox].checkbox-icon.ion-android-checkbox-outline-blank,
input[type=radio].radio-icon.ion-ios-circle-outline {
  visibility: hidden;
}
.mobile-item-row {
  input[type=checkbox],
  input[type=radio] {
    margin: 0px 5px;
  }
}
.label-ion-input {
  top: 0px;
  position: relative;
}

我的复选框的 HTML 是：

<td class="icon-radio-checkbox">
    <input name="desktop-icon-radio-checkbox" id="dsk_7bc76bda-cfc7-4f86-b19c-0a7a4890cdf4" class="checkbox-icon ion-android-checkbox-outline-blank ion-fw" checked="" type="checkbox">
 </td>

这在iPhone上的Chrome，IE和Safari中完美运行，但在FireFox中则不然。我错过了什么？

Answer 1

伪

元素:before和:after只能用于具有内容的元素。 Input是一个空元素。 div是一个有内容的元素。

视觉解释和说明

<div>
 :before
 CONTENT
 :after
</div>
<input type="text"> <-- no content

:before和:after附上内容。由于"input"元素没有内容，因此没有应该插入的位置。火狐做对了。

空的 HTML 元素

没有内容的 HTML 元素称为空 元素。

<br>是一个没有结束标记的空元素(<br> 标记定义 换行符(。

空元素可以在开始标记中"关闭"，如下所示：<br /> 。

HTML5不需要关闭空元素。但如果你愿意 更严格的验证，或者您需要使文档可读 XML 解析器，您应该关闭所有 HTML 元素。

我的建议是使用标签元素并将其与复选框结合使用。

这里有一个例子：

input[type=checkbox] {
  display:none;
}
 
input[type=checkbox] + label
{
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>