显示复选框而不是图像

debugcn 发表于 Dev

弗兰基B

我想显示checkbox而不是图像（图像必须隐藏在每一行中）。另一个问题是height为图片预留的空间必须与图片相同，但width必须为30px（图片的高度是动态的，所以我不知道）。如果复选框位于为图像保留的空间的中心，那将是理想的。是否有可能做到这一点？

这是示例和代码：

<table>
  <thead>
    <th>Image</th>
  </thead>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
</table>

莫阿兹·马布洛克

提琴手

的CSS

img{
    /*opacity: 0; adjust the opacity to show or hide the img*/
    visibility: hidden;  /* @Marcos Silva */

}
.img_con{
    position: relative;
    width: 30px;
    overflow-x: hidden;
}
input{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom:0;
    margin: 0 auto;
    margin-top: 100%
}

HTML

<table>
  <thead><th>Image</th></thead>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。