我使用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;
}
谢谢,
在firefox中,:: before或:: after在输入时不起作用。您需要使用标签而不是输入。
让我们与这些一起工作-
input.custom-checkbox + label::before
input.custom-checkbox:checked + label::after
谢谢
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句