我想有一个标准复选框的替代方案 - 基本上我想使用图像，当用户单击图像时，将其淡出并覆盖复选框。
从本质上讲，我想做一些像Recaptcha 2一样的事情，当它让你点击符合特定标准的图像时。您可以在此处看到Recaptcha演示，但它有时可能会让您解决文本问题，而不是图像选择。所以这是一个截图：
当您单击其中一张图片（在本例中为包含牛排图片）时，您点击的图片大小会缩小，并显示蓝色勾号，表示您已勾选该图片。
假设我想重现这个确切的示例。
我意识到我可以有9个隐藏的复选框，并附加一些jQuery，以便当我单击图像时，它会选择/取消选择隐藏的复选框。但是图像的缩小/覆盖刻度线呢？
这很容易自己实现，不需要预先制作的解决方案。此外，它也会教你很多东西，因为你似乎不太容易使用CSS。
您的复选框需要具有不同的属性。这允许您使用标签的 -属性将 连接到它。id<label>for
例：
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
将标签附加到复选框将触发浏览器行为：每当有人单击标签（或其中的图像）时，复选框都会被切换。
接下来，通过应用复选框来隐藏复选框。display: none;
现在剩下要做的就是为伪元素设置所需的样式（将用作可视复选框替换元素）：label::before
label::before {
background-image: url(../path/to/unchecked.png);
}
在最后一个棘手的步骤中，当选中复选框时，您可以使用CSS的伪选择器来更改图像：:checked
:checked + label::before {
background-image: url(../path/to/checked.png);
}
（相邻的同级选择器）确保您仅更改标记中隐藏复选框后面的标签。+
您可以通过将两个图像都放在子画面贴图中并仅应用更改而不是交换图像来优化这一点。background-position
当然，您需要正确定位标签，然后应用并设置正确和。display: block;widthheight
我在这些说明之后创建的codepen示例和代码段使用相同的技术，但不是为复选框使用图像，而是纯粹使用CSS替换复选框，在标签上创建一个，一旦选中，就有.添加一些圆角边框和甜蜜的过渡，结果真的很讨人喜欢！::beforecontent: "✓";
下面是一个工作代码笔，它展示了该技术，并且不需要为复选框提供图像：
下面是代码段中的相同代码：
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>调用了三种整洁的设备：
label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png");
position: absolute;
z-index: 100;
}
:checked+label:before {
content: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png");
}
input[type=checkbox] {
display: none;
}
/*pure cosmetics:*/
img {
width: 150px;
height: 150px;
}
label {
margin: 10px;
}<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR0LkgDZRDTgnDrzhnXGDFRSItAzGCBEWEnkLMdnA_zkIH5Zg6oag">
</label>
<input type="checkbox" id="myCheckbox2" />
<label for="myCheckbox2">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRhJjGB3mQxjhI5lfS9SwXou06-2qT_0MjNAr0atu75trXIaR2d">
</label>
<input type="checkbox" id="myCheckbox3" />
<label for="myCheckbox3">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQuwWbUXC-lgzQHp-j1iw56PIgl_2eALrEENUP-ld72gq3s8cVo">
</label>
