自定义复选框不适用于Firefox

盆栽

我使用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

谢谢,

莫卡拉姆·汗(Mokarram Khan)

在firefox中,:: before或:: after在输入时不起作用。您需要使用标签而不是输入。

让我们与这些一起工作-

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

谢谢

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自定义复选框不适用于Firefox

来自分类Dev

样式不适用于自定义复选框和单选按钮

来自分类Dev

捕获tr内部的更改事件不适用于自定义复选框

来自分类Dev

样式不适用于自定义复选框和单选按钮

来自分类Dev

icheck复选框不适用于angularjs

来自分类Dev

Vue“更改”方法不适用于复选框

来自分类Dev

icheck复选框不适用于angularjs

来自分类Dev

OnClick不适用于PHP创建的复选框

来自分类Dev

Rails计算值不适用于复选框

来自分类Dev

Vue 计算的 setter 不适用于复选框?

来自分类Dev

jquery 表单验证不适用于复选框

来自分类Dev

validates_acceptance_of 不适用于复选框

来自分类Dev

Firefox上的自定义复选框失败

来自分类Dev

Firefox上的自定义复选框失败

来自分类Dev

Rails 自定义字体不适用于 Firefox 和 IE

来自分类Dev

自定义主题不适用于FragmentActivity

来自分类Dev

attachmentButtonTappedForRowWithIndexPath不适用于自定义按钮或标签

来自分类Dev

setText不适用于自定义Edittext

来自分类Dev

PHPHtmlParser getAttribute不适用于自定义属性

来自分类Dev

prepareForSegue不适用于自定义segue(快速)

来自分类Dev

自定义绑定动画不适用于foreach

来自分类Dev

UIButton不适用于自定义UITableViewCell(Swift)

来自分类Dev

AutoCompleteTextView不适用于自定义ArrayAdapter

来自分类Dev

setMargins方法不适用于自定义ViewGroup

来自分类Dev

Django自定义命令不适用于args

来自分类Dev

Xamarin样式不适用于自定义视图

来自分类Dev

我的自定义主题不适用于按钮

来自分类Dev

CSS不适用于自定义fxml组件

来自分类Dev

自定义主题不适用于FragmentActivity