单击链接名称时如何更改复选标记的颜色

Question

我有以下锚标记，它们动态嵌入到<ul>标记，当用户点击单词TEST我希望复选标记将颜色更改为蓝色时，我尝试了以下但是它不起作用，是什么我做错了吗？

.checkmark{
display: inline-block;
    width: 22px;
    /* height: 22px; */
    height: 17px;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 50%;
    margin-bottom: 1px;
}
.checkmark:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 9px;
    background-color: #ccc;
    left: 11px;
    top: 6px;
}

.checkmark {
    cursor: pointer;
}

 .checkmark:after {
        content: '';
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ccc;
        left: 8px;
        top: 12px;
    }

input[type="checkbox"]:checked + .checkmark:before,
input[type="checkbox"]:checked + .checkmark:after {
    background-color: blue;
}

<a class="internal" data-destination="local" dataid="66027" data-nodeid="undefined" ><span><input type="checkbox" style="display:none;" id="cb66027 "></span>TEST<label for="cb66027" class="checkmark"></label></a>

Answer 1

<a>缠绕<input>，点击后不会切换选中的状态。您应该将<a>转换为<label>。

这意味着您当前的.checkmark标签需要是另一个元素。我使用了跨度。

您还应将<input>移到其父级<span>之外，以便<input>和.checkmark成为兄弟姐妹。

＆＃13;

＆＃13;

.checkmark {
  display: inline-block;
  width: 22px;
  /* height: 22px; */
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background-color: blue;
}

＆＃13;

<label class="internal" data-destination="local" dataid="66027" data-nodeid="undefined">
  <input type="checkbox" style="display:none;" id="cb66027 ">
  TEST
  <span for="cb66027" class="checkmark"></span>
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您使用了错误的def conditional3[U](bool: Boolean, parse: () => Rule1[U]): Rule1[Option[U]] = if (bool) rule { parse() ~> (Some(_: U)) } else rule { push(None) } 选择器...

+表示...... input+.checkmark和input应该是相邻的元素......这不属于您的情况......

...请删除.checkmark并将span和input置于同一级别...

...也使用.checkmark代替opacity:0到display:none ...

我已经改变了你的一些css

Stack Snippet

＆＃13;

＆＃13;

input[checkbox]

＆＃13;

.checkmark {
  display: inline-block;
  width: 22px;
  /* height: 22px; */
  height: 17px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-left: 50%;
  margin-bottom: 1px;
}

.checkmark:before {
  content: '';
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark {
  cursor: pointer;
}

.checkmark:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
  background-color: blue;
}

input[type="checkbox"] {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 9;
  height: 100%;
  top: 0;
  cursor: pointer;
  opacity: 0;
  margin: 0;
}

a.internal {
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;