Question

Jsfiddle demo

<div class="bookmarked">
<input type="checkbox" class="addCheckItem" id="add_0">
<input type="hidden" id="bookmarkId_0" value="dsx">
<label for="add_0">Hello</label>
</div>

 .addCheckItem{
  display:none;
  float: right;
}
.addCheckItem + label:after
{
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}
.addCheckItem:checked + label:after
{
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}

希望隐藏在可见性中的复选框。然后，当单击标签时，它将显示选中的刻度图像。但是css没有工作，所以首先尝试基本的背景颜色，看它是否有效。已经尝试在谷歌上找到回答，但复选框仍未显示。

不确定我哪里出错了。帮助赞赏。

Answer 1

请尝试以下代码：

.addCheckItem{
  display:none;
}
.addCheckItem:checked + label
{
  background: url("http://www.i2symbol.com/images/symbols/check/check_mark_u2713_icon_256x256.png") no-repeat scroll right center/ 40px;
  display: block;
}

<div class="bookmarkName">
<input type="checkbox" class="addCheckItem" id="add_0">
<label for="add_0">Hello</label>
<input type="hidden" id="bookmarkId_0" value="dsx">
</div>

Answer 2

变化：

.addCheckItem:checked + label:after

致：

.addCheckItem:checked ~ label

Check out this blog post可以很好地参考CSS选择器。您使用了+

它将仅选择前一个元素前面的元素。在这种情况下，每个ul后只有第一段会有红色文字。

~将选择兄弟姐妹。如果您可以告诉我您对:after选择器的意图，我可以调整我的答案以帮助您更好。

希望这会有所帮助。祝你好运！

复选框没有按预期显示

2 个答案: