如何在CSS中配置input[type=image]背景资源替代内联src属性

方案1：最小改动适配现有HTML结构 #

如果必须保留type="image"的input标签，按以下步骤修改即可把图片配置迁移到CSS：

第一步：调整HTML代码 #

移除input标签内的src属性，替换为1像素透明占位图避免浏览器显示缺图提示：

<div class="card">
  <div class="body">
    <input class="checkbox" type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  </div>
</div>

第二步：编写CSS样式 #

在CSS文件中设置背景图、尺寸、交互状态：

.checkbox {
  /* 设置尺寸和原图片尺寸匹配即可 */
  width: 48px;
  height: 48px;
  /* 配置背景图 */
  background-image: url("你的未选中状态图片地址");
  background-size: cover;
  background-repeat: no-repeat;
  /* 去掉input默认边框 */
  border: none;
  outline: none;
  cursor: pointer;
}
/* 点击选中状态切换背景 */
.checkbox:active, .checkbox.checked {
  background-image: url("你的选中状态图片地址");
}

注意：type="image"的input默认是表单提交按钮，没有原生选中状态，需要额外写少量JS监听点击事件切换checked类名实现复选逻辑

方案2：更适配复选框场景的优化方案 #

直接改用原生type="checkbox"，自带选中状态逻辑，不需要额外写JS处理选中状态判断，整体实现更简洁：

第一步：调整HTML代码 #

<div class="card">
  <div class="body">
    <input class="checkbox" type="checkbox" id="customCheck">
    <label for="customCheck"></label>
  </div>
</div>

第二步：编写CSS样式 #

/* 隐藏原生checkbox默认样式 */
.checkbox {
  display: none;
}
/* 用label模拟图片复选框 */
.checkbox + label {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-image: url("你的未选中状态图片地址");
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* 原生checkbox选中时自动切换label背景 */
.checkbox:checked + label {
  background-image: url("你的选中状态图片地址");
}

内容的提问来源于stack exchange，提问作者jacobcan118