像复选框一样使用图像

我想有一个替代标准的复选框-基本上我想使用图像，当用户点击图像，淡出和覆盖一个勾选框。

本质上，我想做一些像 Recaptcha 2做的事情，当它让你点击图片，满足一定的标准。你可以使用 点击这里查看 Recaptcha 演示，但是它有时可能会让你解决文本问题，而不是选择图片。下面是一个截图:

Google Recaptcha screenshot

当您单击其中一个图像时(在本例中，包含一张牛排图片) ，您单击的图像会缩小，并出现蓝色勾，表示您已经勾选了它。

假设我想重现这个精确的例子。

我意识到我可以有9个隐藏复选框，并附加一些 jQuery，这样当我点击图片时，它就会选择/取消选择隐藏复选框。但是图像的缩小/覆盖蜱虫的情况又如何呢？

122289 次浏览
小开
最佳答案

纯语义 HTML/CSS 解决方案

这是很容易实现自己，没有预先制定的解决方案的必要性。它也会教你很多，因为你似乎不太容易与 CSS。

这是你需要做的:

您的复选框需要具有独特的 id属性。这允许您使用标签的 for属性将 <label>连接到它。

例如:

<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);
}

+(邻近兄弟姐妹选择器)确保只更改直接跟在标记中的隐藏复选框后面的标签。

您可以通过将这两个图像放在一个 spritemap 中，并且只在 background-position中应用更改而不是交换图像来优化它。

当然，您需要正确定位标签，并应用 display: block;和设置正确的 width和 height。

编辑:

我在这些说明之后创建的 codepen 示例和代码片段使用相同的技术 而不是使用复选框的图像，复选框的替换是完全用 CSS 完成的，在标签上创建一个 ::before，一旦检查，就会显示 content: "✓";。添加一些圆润的边框和甜蜜的过渡，结果真的很可爱！

下面是一个工作代码集，它展示了该技术，并且不需要复选框的图像:

Http://codepen.io/anon/pen/wadwpx

下面是代码片段中的相同代码:

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>

小开

我会附加一个额外的 div 与 position: relative;和 class="checked"具有相同的宽度/高度的图像和比位置在包含图标的 left: 0; top: 0;。从 display: none;开始。

现在你可以听 click事件:

$( '.captcha_images' ).click( function() {
$(this + '.checked').css( 'display', 'block' );
$(this).animate( { width: '70%', height: '70%' } );
});

这样，你可以得到图标，也可以调整图像的大小，以一个较小的方式。

注意: 只是想告诉你我的想法背后的“逻辑”，这个例子可能不工作或有一些错误。

小开

纯 CSS 解决方案

有三种巧妙的方法:

  1. :checked选择器
  2. ::before伪选择器
  3. Csscontent属性。

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>

小开

这里有一个快速选择像复选框这样的图像的例子

使用 Knockout.js 更新示例:

var imageModel = function() {
this.chk = ko.observableArray();
};
ko.applyBindings(new imageModel());
    input[type=checkbox] {
display:none;
}
 

input[type=checkbox] + label
{
display:inline-block;
width:150px;
height:150px;
background:#FBDFDA;
border:none;
}
   

input[type=checkbox]:checked + label
{
background:#CFCFCF;
border:none;
position:relative;
width:100px;
height:100px;
padding: 20px;
}


input[type=checkbox]:checked + label:after
{
content: '\2713';
position:absolute;
top:-10px;
right:-10px;
border-radius: 10px;
width: 25px;
height: 25px;
border-color: white;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<input type='checkbox' name='image1' value='image1' id="image1" data-bind="checked: chk"/><label for="image1"></label><label for="image1"><img class='testbtn'/></label>


<div data-bind="html: chk"></div>

小开

参见这个 jQuery 插件: 复选框 (在 < a href = “ https://www.npmjs.com/package/imgcheckbox”rel = “ nofollow”> npm 和 译自: 美国《科学》杂志网站(http://bower.io/search/? q = imgcheckbox)上)

免责声明: 解决此问题不需要 javascript。代码的可维护性和效率之间存在矛盾。虽然不需要插件(或任何 javascript) ，但它确实使构建更快，更容易更改。

赤裸裸的解决方案:

使用非常 简单的 HTML(没有复选框和标签之类的乱七八糟的东西) :

<img class="checkable" src="http://lorempixel.com/100/100" />

您可以使用 jQuery 的 ToggleClass在 click事件上打开/关闭 selected或 checked类:

$("img.checkable").click(function () {
$(this).toggleClass("checked");
});

获取检查的项目

$(".checked")

加上酷:

你可以根据这个来设计图像的样式，但是一个大问题是，如果没有其他 DOM 元素，你甚至不能使用 ::before和 ::after来添加像检查标记这样的东西。解决方案是用另一个元素包装您的图像(将单击侦听器附加到包装的元素也是有意义的)。

$("img.checkable").wrap("<span class='fancychecks'>")

这使得你的 html 非常干净，你的 js 令人难以置信的可读。

/* Note that this js actually responds
to a click event on the wrapped element!
(not the image) */
$("img.checkable").wrap("<span class='fancychecks'>")
.parent().click(function() {
$(this).toggleClass("checked");
});
/* style the images */
span.fancychecks img {
display: block;
margin: 0;
padding: 0;
transition-duration: 300ms;
transform: scale(1);
filter: none;
-webkit-filter: grayscale(0);
}
span.fancychecks.checked img {
transform: scale(0.8);
filter: gray;
filter: grayscale(1);
-webkit-filter: grayscale(1);
}


/* style the parent spans */
span.fancychecks {
padding: 0;
margin: 5px;
display: inline-block;
border: 1px solid transparent;
transition-duration: 300ms;
}
span.fancychecks.checked {
border-color: #ccc;
}


/* Using conexo's fantastic CSS, make the checkmarks */
span.fancychecks::before {
background-color: rgba(50, 200, 50, 0.7);
color: white;
content: "✓";
font-weight: bold;
border-radius: 50%;
position: absolute;
margin: 2px;
top: 1;
left: 1;
z-index: 1;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transform: scale(0);
transition-duration: 300ms;
}
span.fancychecks.checked::before {
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img class="checkable" src="http://lorempixel.com/100/100/city/1" />
<img class="checkable" src="http://lorempixel.com/100/100/city/2" />
<img class="checkable" src="http://lorempixel.com/100/100/city/3" />

使用 复选框 jQuery 插件:

受到上述解决方案的启发，我构建了一个插件，它可以像下面这样方便地使用:

$("img").imgCheckbox();
  • 将检查图像的数据注入到窗体中
  • 支持自定义复选标记
  • 支持定制的 CSS
  • 支持预选的元素
  • 支持无线电组，而不是简单的图像切换
  • 有事件回调
  • 明智的违约
  • 重量轻，超级容易使用

看它 一个 href = “ http://jcuenod.github.io/imgCheckbox/”rel = “ nofollow”> in action (和 看看源头)

小开

我注意到其他答案要么不使用 <label>(为什么不呢?)或者需要匹配 for和 id属性。这意味着如果您有冲突的 ID，您的代码将无法工作，并且您必须记住每次都要创建唯一的 ID。

另外，如果用 display:none或 visibility:hidden隐藏 input，浏览器将不会关注它。

复选框及其文本(在本例中是图像)可以包装在标签中:

.fancy-checkbox-label > input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: inherit;
}
.fancy-checkbox-label {
font-weight: normal;
cursor: pointer;
}
.fancy-checkbox:before {
font-family: FontAwesome;
content: "\f00c";
background: #fff;
color: transparent;
border: 3px solid #ddd;
border-radius: 3px;
z-index: 1;
}
.fancy-checkbox-label:hover > .fancy-checkbox:before,
input:focus + .fancy-checkbox:before {
border-color: #bdbdff;
}
.fancy-checkbox-label:hover > input:not(:checked) + .fancy-checkbox:before {
color: #eee;
}
input:checked + .fancy-checkbox:before {
color: #fff;
background: #bdbdff;
border-color: #bdbdff;
}
.fancy-checkbox-img:before {
position: absolute;
margin: 3px;
line-height: normal;
}
input:checked + .fancy-checkbox-img + img {
transform: scale(0.9);
box-shadow: 0 0 5px #bdbdff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<p>
<label class="fancy-checkbox-label">
<input type="checkbox">
<span class="fancy-checkbox"></span>
A normal checkbox
</label>
</p>
<p>
<label class="fancy-checkbox-label">
<input type="checkbox">
<span class="fancy-checkbox fancy-checkbox-img"></span>
<img src="http://placehold.it/150x150">
</label>
</p>

小开

为了扩展任何使用 WordPress 和 GravityForms 生成表单并希望自动填充带有文章列表和相关特色缩略图的复选框字段的人所接受的答案

// Change '2' to your form ID
add_filter( 'gform_pre_render_2', 'populate_checkbox' );
add_filter( 'gform_pre_validation_2', 'populate_checkbox' );
add_filter( 'gform_pre_submission_filter_2', 'populate_checkbox' );
add_filter( 'gform_admin_pre_render_2', 'populate_checkbox' );


function populate_checkbox( $form ) {


foreach( $form['fields'] as &$field )  {


// Change '41' to your checkbox field ID
$field_id = 41;
if ( $field->id != $field_id ) {
continue;
}


// Adjust $args for your post type
$args = array(
'post_type' => 'pet',
'post_status' => 'publish',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'pet_category',
'field' => 'slug',
'terms' => 'cat'
)
)
);


$posts = get_posts( $args );


$input_id = 1;


foreach( $posts as $post ) {


$feat_image_url = wp_get_attachment_image( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
$feat_image_url .= '<br />' . $post->post_title;


if ( $input_id % 10 == 0 ) {
$input_id++;
}


$choices[] = array( 'text' => $feat_image_url, 'value' => $post->post_title );
$inputs[] = array( 'label' => $post->post_title, 'id' => "{$field_id}.{$input_id}" );


$input_id++;
}


$field->choices = $choices;
$field->inputs = $inputs;


}


return $form;
}

还有 CSS:

.gform_wrapper .gfield_checkbox li[class^="gchoice_2_41_"] {
display: inline-block;
}


.gform_wrapper .gfield_checkbox li input[type="checkbox"][id^="choice_2_41_"] {
display: none;
}




.gform_wrapper .gfield_checkbox li label[id^="label_2_41_"] {
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[id^="label_2_41_"]:before {
font-family: "font-icons";
font-size: 32px;
color: #1abc9c;
content: " ";
display: block;
background-color: transparent;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}


label[id^="label_2_41_"] img {
transition-duration: 0.2s;
transform-origin: 50% 50%;
}


:checked + label[id^="label_2_41_"] {
border-color: #ddd;
}


/* FontAwesome tick */
:checked + label[id^="label_2_41_"]:before {
content: "\e6c8";
background-color: transparent;
transform: scale(1);
}


:checked + label[id^="label_2_41_"] img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: 0;
}
小开

我做了一个 “角度-使用像复选框和收音机图像”的例子

链接到 Stackblitz

enter image description here

enter image description here

在 app.Component. html 文件中:

<div class="cont-bg">
<h5 class="text-white">Checkbox</h5>
<div class="cont-main">
<div class="cont-checkbox" *ngFor="let car of cars; index as i">
<input type="checkbox" [id]="'myCheckbox-' + i" />
<label [for]="'myCheckbox-' + i">
<img [src]="car.img" />
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">\{\{ car.name }}</div>
</label>
</div>
</div>
<h5 class="text-white">Radio</h5>
<div class="cont-main">
<div class="cont-checkbox" *ngFor="let car of cars; index as i">
<input type="radio" name="myRadio" [id]="'myRadio-' + i" />
<label [for]="'myRadio-' + i">
<img [src]="car.img" />
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">\{\{ car.name }}</div>
</label>
</div>
</div>
</div>

在 app.Component. scss 文件中:

* {
font-family: Lato;
--transition: 0.15s;
--border-radius: 0.5rem;
--background: #ffc107;
--box-shadow: #ffc107;
// --box-shadow: #0082ff;
}


.cont-bg {
min-height: 100vh;
background-image: radial-gradient(
circle farthest-corner at 7.2% 13.6%,
rgba(37, 249, 245, 1) 0%,
rgba(8, 70, 218, 1) 90%
);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


.cont-main {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}


.cont-checkbox {
width: 150px;
height: 100px;
border-radius: var(--border-radius);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
transition: transform var(--transition);
background: white;
margin-bottom: 0.75rem;
margin-right: 0.75rem;
&:active {
transform: scale(0.9);
}
input {
display: none;
&:checked + label {
opacity: 1;
box-shadow: 0 0 0 3px var(--background);
.cover-checkbox {
opacity: 1;
transform: scale(1);
svg {
stroke-dashoffset: 0;
}
}
img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
}
}
}
label {
cursor: pointer;
border-radius: var(--border-radius);
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
opacity: 0.6;
img {
width: 100%;
height: 70%;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
.cover-checkbox {
position: absolute;
right: 5px;
top: 3px;
z-index: 1;
width: 23px;
height: 23px;
border-radius: 50%;
background: var(--box-shadow);
border: 2px solid #fff;
transition: transform var(--transition),
opacity calc(var(--transition) * 1.2) linear;
opacity: 0;
transform: scale(0);
svg {
width: 13px;
height: 11px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 5px 0 0 3px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
transition: stroke-dashoffset 0.4s ease var(--transition);
stroke-dashoffset: 16px;
}
}
.info {
text-align: center;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.8rem;
}
}
}

在 app.Component. ts 文件中:

import { Component, VERSION } from '@angular/core';


@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
cars = [
{
id: '1',
name: 'Mazda MX-5 Miata',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*',
},
{
id: '2',
name: 'Toyota Supra',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*',
},
{
id: '3',
name: 'Chevy Corvette',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-porsche-cayman-mmp-1-1593003674.jpg?crop=0.648xw:0.485xh;0.129xw,0.263xh&resize=980:*',
},
{
id: '4',
name: 'Porsche 718 Cayman',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-porsche-718-cayman-mmp-1-1593003156.jpg?crop=0.735xw:0.551xh;0.138xw,0.240xh&resize=980:*',
},
{
id: '5',
name: 'Porsche 718 Boxster',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-bmw-m2-mmp-1-1599687968.jpg?crop=0.706xw:0.528xh;0.102xw,0.268xh&resize=980:*',
},
{
id: '6',
name: 'BMW M2',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-bmw-z4-mmp-1-1599583762.jpg?crop=0.779xw:0.584xh;0.0782xw,0.196xh&resize=980:*',
},
{
id: '7',
name: 'BMW Z4',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-mmp-1-1585333717.jpg?crop=0.344xw:0.331xh;0.241xw,0.328xh&resize=980:*',
},
{
id: '8',
name: 'Chevy Camaro',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-zl1-mmp-1-1604071262.jpg?crop=0.818xw:0.663xh;0.0799xw,0.163xh&resize=980:*',
},
{
id: '9',
name: 'Chevy Camaro ZL1',
img: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-chevrolet-camaro-zl1-mmp-1-1604071262.jpg?crop=0.818xw:0.663xh;0.0799xw,0.163xh&resize=768:*',
},
];
}

纯 CSS 复选框和收音机:

* {
font-family: Lato;
margin: 0;
padding: 0;
--transition: 0.15s;
--border-radius: 0.5rem;
--background: #ffc107;
--box-shadow: #ffc107;
}


.cont-bg {
min-height: 100vh;
background-image: radial-gradient(
circle farthest-corner at 7.2% 13.6%,
rgba(37, 249, 245, 1) 0%,
rgba(8, 70, 218, 1) 90%
);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


.cont-title {
color: white;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}


.cont-main {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}


.cont-checkbox {
width: 150px;
height: 100px;
border-radius: var(--border-radius);
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
background: white;
transition: transform var(--transition);
}


.cont-checkbox:first-of-type {
margin-bottom: 0.75rem;
margin-right: 0.75rem;
}


.cont-checkbox:active {
transform: scale(0.9);
}


input {
display: none;
}


input:checked + label {
opacity: 1;
box-shadow: 0 0 0 3px var(--background);
}


input:checked + label img {
-webkit-filter: none; /* Safari 6.0 - 9.0 */
filter: none;
}


input:checked + label .cover-checkbox {
opacity: 1;
transform: scale(1);
}


input:checked + label .cover-checkbox svg {
stroke-dashoffset: 0;
}


label {
display: inline-block;
cursor: pointer;
border-radius: var(--border-radius);
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
opacity: 0.6;
}


label img {
width: 100%;
height: 70%;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}


label .cover-checkbox {
position: absolute;
right: 5px;
top: 3px;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--box-shadow);
border: 2px solid #fff;
transition: transform var(--transition),
opacity calc(var(--transition) * 1.2) linear;
opacity: 0;
transform: scale(0);
}


label .cover-checkbox svg {
width: 13px;
height: 11px;
display: inline-block;
vertical-align: top;
fill: none;
margin: 5px 0 0 3px;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
transition: stroke-dashoffset 0.4s ease var(--transition);
stroke-dashoffset: 16px;
}


label .info {
text-align: center;
margin-top: 0.2rem;
font-weight: 600;
font-size: 0.8rem;
}
<div class="cont-bg">
<div class="cont-title">Checkbox</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-1" />
<label for="myCheckbox-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="checkbox" id="myCheckbox-2" />
<label for="myCheckbox-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
<div class="cont-title">Radio</div>
<div class="cont-main">
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-1" />
<label for="myRadio-1">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Mazda MX-5 Miata</div>
</label>
</div>
<div class="cont-checkbox">
<input type="radio" name="myRadio" id="myRadio-2" />
<label for="myRadio-2">
<img
src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
/>
<span class="cover-checkbox">
<svg viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</svg>
</span>
<div class="info">Toyota Supra</div>
</label>
</div>
</div>
</div>


提交答案