html

<div class="categories-wrapper" th:each="i:${#numbers.sequence(1, 24, 1)}"><img src='http://www.bjpowernode.com/Public/Uploads/article/20220216/1644976089@e7601ccbe1b091b506fc05ec3e970a82.jpg' alt='Random image' width="100px" height="100px" /><input class='category-input' type="checkbox" id='checker' name="categories[]" value=""><label for="checker"></label><input type="hidden" name="categoryFiles[]" value="">
</div>

css

.categories-wrapper {position: relative;margin: 5px;width: 100px; /*请固定长度，否则选择时会改变宽度*/
}
.category-input {position: absolute;top: 0;left: 0;opacity: 0;width: 100%;height: 100%;
}
.category-input:checked + label{background: url("/images/check.png") no-repeat; /* put your image here*/background-size: 40px 40px; /*图片等比缩放*/height: 40px;width: 40px;position: absolute;top:0;left:0;
}

HTML + css实现图片勾选功能相关推荐

iOS开发图片选择器、图片多选功能的实现
版权声明:本文为博主原创文章,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接. Photos.framework是iOS8后苹果推出的一套替代AssetsLibrary.f ...
iOS开发------简单实现图片多选功能(Photos.framework篇)
Photos.framework是iOS8后苹果推出的一套替代AssetsLibrary.framework获取相册资源的原生库,至于AL库,欢迎大家给博文iOS开发--简单实现图片多选功能(Asse ...
简单实现图片多选功能
iOS开发------简单实现图片多选功能(Photos.framework篇) 楼主大部分都是查看官方开发文档进行探索的(当然,实在不明白了也会请求google 的 0.0 ).这里就说一下个人的看 ...
Antd table勾选功能
勾选功能实现 const [selectedRowKeys, setSelectedRowKeys] = React.useState([]) const rowSelection = {select ...
相册图片多选功能的实现
使用 UIImagePickerController,我们可以很方便的从系统相册中选择照片.但 UIImagePickerController 每次只能选择一张图片,不支持多选.这样如果我们需要一 ...
QAbstractItemView子类如:QTreeView、QTableView等子项单元格复选框勾选/取消勾选功能实现
1.前言本博文所说的技术点适用于同时满足下面条件的所有QAbstractItemView视图类的子类: 模型类从 QAbstractItemModel派生. 代理类从QStyledItemDeleg ...
前端学习（1935）vue之电商管理系统电商系统之实现权限的默认勾选功能
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Android高仿微信图片多选功能
1.概述关于手机图片加载器,在当今像素随随便便破千万的时代,一张图片占据的内存都相当可观,作为高大尚程序猿的我们,有必要掌握图片的压缩,缓存等处理,以到达纵使你有万张照片,纵使你的像素再高,我们也能 ...
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
效果展示点击全选被全部勾选,再点击则取消勾选(下方还有取消按钮,实现同样功能). 也可以实现点击的书籍被勾选,再次点击则取消勾选在功能实现过程中主要是对v-show.v-if.v-else等的灵活 ...

HTML + css实现图片勾选功能

html

css

HTML + css实现图片勾选功能相关推荐

最新文章

热门文章