Question

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

/* 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包含内容。因为＆＃39;输入＆＃39; element没有内容，因此没有应该插入的位置。 Firefox做对了。

清空HTML元素

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

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

空元素可以＆＃34;关闭＆＃34;在开头标记中，如下所示：<br />。

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

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

这是一个例子：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: