为什么我的复选框样式不起作用?
问题描述:
我做了一些自定义复选框和单选按钮。我称呼他们CSS如下:为什么我的复选框样式不起作用?
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after,
input[type="radio"][checked="checked"] + label:after,
input[type="radio"]:checked + label:after {
position: absolute;
display: block;
float: left;
height: 10px;
width: 10px;
top: 4px;
left: -19px;
z-index: 2;
background: #b7b7b7;
content: "";
}
input[type="checkbox"]:checked + label:after,
input[type="checkbox"][checked="checked"] + label:after {
background: none;
top: 1px;
left: -20px;
font-family: 'FontAwesome';
font-size: 12px;
color: #b7b7b7;
content: "\f00c";
}
这些元素的HTML看起来像这样
<div class="checkbox" ng-repeat="group in groups.initData.groups"
ng-checked="groups.modalData.access_groups[$index+1]">
<input type="checkbox"
class="group-checkbox">
<label><% group.group %> </label>
</div>
然后我初始化它们像这样使用jQuery的时候我斜视负载:
$('.checkbox').click(function() {
if ($(this).children('input').prop("disabled"))
return;
if ($(this).children('input').prop("checked"))
$(this).children('input').prop("checked", false);
else
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
/* Radio handler */
$('.radio').click(function() {
if ($(this).children('input').prop("disabled"))
return;
var name = $(this).children('input').attr("name");
$(this).children('input[name="' + name + '"]').prop("checked", false);
$(this).children('input').prop("checked", true);
$(this).children('input').change();
});
我不明白为什么造型不适用?我的角度代码工作,并把正确的检查=“选中”属性上是真实的元素为我表达
答
font-family: 'FontAwesome';
是这里的问题。虽然您可以设置复选框的样式,但有一些限制。就像,如果你正在使用一些自定义的字体家族,它不会工作。删除字体家族,并使用下面的unicode内容,它应该工作。
content: "\2714";
你能把它放到[plunker](http://plnkr.co/edit/)吗? – 2015-10-16 09:26:19
选中和未选中的样式是相同的?复选框的样式也有限制,甚至在浏览器中工作的不一样。 –
你是什么意思的“不工作”?正如我可以测试它,它按预期工作。我猜你缺少的是例如:'.checkbox {position:relative; }' –