图像复选框的语义正确 html答案

【问题标题】：Semantic correct html for image checkbox图像复选框的语义正确 html
【发布时间】：2021-10-01 01:44:51
【问题描述】：

对于可以选择或取消选择的图像，什么是语义正确的 HTML (HTML 5) 标记，并且应该表现为表单中的复选框。从语义上讲，图像不仅仅是复选框的样式，而是被选中的实际对象。

【问题讨论】：

你想要它在语义上还是你想要它实际工作？你不能两者兼得。
您需要根据点击执行的操作
图像/复选框是表单的一部分，并且目的地应该知道它们中的每一个的选中性......即表单中的标准复选框行为

【解决方案1】：

我会将图像和复选框都放在label 元素中：

<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>

这样您将图像与复选框相关联，激活图像将切换复选框的状态。

您还可以隐藏复选框并使用:selected + img 根据选中状态设置图像样式。

label {
  float: left;
  clear: left;
}
label > input {
  opacity: 0;
}
label > img {
  opacity: .4;
  cursor: pointer;
}
label > :checked + img {
  opacity: 1;
}

<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>
<label>
  <input type="checkbox" />
  <img src="//cdn.sstatic.net/stackoverflow/img/favicon.ico" />
</label>

【讨论】：

确实，我想隐藏复选框，并操纵图像显示选择状态。我不介意在 JS 中这样做，但无 JS 肯定会更好......
啊，在我完成评论之前你已经给出了答案......谢谢！
@burnpanck 如果您想隐藏复选框，请注意display: none 不可访问（无法使用键盘切换）。您可以使用opacity: 0 将其隐藏，position: fixed 使其不流动，使用负数left 和top 将其放置在视口之外。