Display checkbox instead of image

Question

I would like to display checkbox instead of image (image must be hidden in every row). Another problem is that height of the space reserved for the image must be same as image, but width must be 30px (height of the image is dynamic, so I don't know it). It would be ideal if checkbox is in the center of the space reserved for the image. Is it possible to do this?

Here is example and code:

<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>

Sorry, I can not understand what do you mean by image height must be kept? You want the height of a table cell must be the height of original image? — KOUSIK MANDAL
– KOUSIK MANDAL, Commented Feb 26, 2017 at 4:49

Moaz Mabrok · Accepted Answer · 2017-02-26 05:19:00Z

1

jsfiddle

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>

edited Feb 26, 2017 at 5:19

answered Feb 26, 2017 at 5:01

Moaz Mabrok

74011 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

FrenkyB Over a year ago

Is it possible to achieve the same result if all DIV's are in the same cell? only one row, one cell ?

Moaz Mabrok Over a year ago

the same css @FrenkyB

FrenkyB Over a year ago

If you find time and check my other question. It is not the same, because all elements are in the same cell, not in different rows.

Moaz Mabrok Over a year ago

jsfiddle.net/MoazW/sa694nvd/1 or jsfiddle.net/MoazW/wjLguLkm ( Is it possible to achieve the same result if all DIV's are in the same cell? only one row, one cell ?) all divs in one <td> @FrenkyB

Marcos Silva · Accepted Answer · 2017-02-26 05:10:40Z

1

If I understand your question, you want a CSS rule like that:

    img {
      position: absolute;
      width: 30px;
      visibility: hidden;
    }

<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>

answered Feb 26, 2017 at 5:10

Marcos Silva

2,0571 gold badge20 silver badges25 bronze badges

Collectives™ on Stack Overflow

Display checkbox instead of image

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related