单击输入图像时如何用颜色覆盖输入图像

Question

当用户单击<input type="image>时，我找不到一种方法将它更改为颜色，这意味着图像占用的空间将被纯色替换。我的代码如下：

    input:focus{
    color:#0C6
}

和

<input type="image" src="image.jpg" />

Answer 1

你需要一个具有所需颜色的父包装器，
在输入:focus上使用opacity使其透明

.imageWrapper{
  display: inline-block;
  background: #0C6;
}
.imageWrapper input[type=image]{
  vertical-align: top;
  transition: 0.3s; /* fade nicely :) */
}
.imageWrapper input[type=image]:focus{
   opacity: 0;
}

<span class="imageWrapper">
    <input type="image" src="//placehold.it/60x60/f00">
</span>