由于使用图片代替复选框而导致的Google Search Console“可点击元素之间的距离太近”问题

问题描述

我使用图像代替复选框，并且因为我需要隐藏input [“ checkBox”]元素，因此Google Search Console将其标记为对移动设备不友好，并指出“可点击元素太靠近”

以下是显示代码工作方式的示例：

<style>
    input[type=checkBox] {
        display: none;
    }
    img{
        border: 5px solid transparent;
    }
    input[type=checkBox]:checked+img {
        border-color: #000;
    }
</style>
<label>
    <input type="checkBox">
    <img src="https://picsum.photos/200">
</label>

这是在Codepen中：

https://codepen.io/evan-appleby/pen/xxOjBag

取消隐藏复选框时，Google会删除问题，但如果我随后使用图像上的负边距覆盖复选框，则不会删除问题。我该怎么做才能解决此问题，而无需完全删除图像？

解决方法

问题的前提不正确。 Google不会将网站标记为“可点击元素之间的距离太近”以致无法使用图像代替复选框。您可以通过转到Google's Mobility-Friendly Test site并提交上面的代码块来确认。