什么是在语义上正确的HTML(HTML 5)标记,这些图像可以选择或取消选择,并且应在表单中充当复选框。从语义上讲,图像不仅是复选框的样式,还包括所选的实际对象。

最佳答案

我将图像和复选框都放在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>

关于css - 语义正确的HTML用于图像复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33765202/

10-16 11:25
查看更多