当前位置 : 主页 > 网页制作 > css >

css – 如果选中复选框但如果设置为标签然后输入,如何突出显示标签?

来源:互联网 收集:自由互联 发布时间:2021-06-13
参见英文答案 Is there a “previous sibling” CSS selector?13个 Highlight label if checkbox is checked 与上述链接完全不同的设置. 设置1: input type="checkbox" checkedlabelText/label 回答: input:checked + label { f
参见英文答案 > Is there a “previous sibling” CSS selector?                                    13个
Highlight label if checkbox is checked

与上述链接完全不同的设置.

设置1:

<input type="checkbox" checked>
<label>Text</label>

回答:

input:checked + label { font-weight: bold; }

设置2:

<label>Text</label>
<input type="checkbox" checked>

回答:

??
这是一个黑客.

>从HTML元素顺序开始反转
>在flexbox中包装元素
>像往常一样用〜或
>通过订单恢复所需的订单:-1;
>确保将该标签指向有效的ID

.container {
  display: flex; 
}

[type=checkbox]:checked + label {
  color: red;
}

label {
  order: -1;
}
<div class="container">
  <input id="mycheckbox" type="checkbox" checked> 
  <label for="mycheckbox">Text</label>
</div>

jsFiddle

网友评论