How to checkbox in the corner of an image?

Question

I am doing a work for the school in php, css... And I would like to know if it is possible to put checkboxes in images coming from the database. I’d like to put the checkboxes (in red) as they are in the attached image. This is to make it easier to delete more than one "event" at the same time

]1

Answer 1

Before answering what was asked, one remark: it is not possible to style a input of the kind checkbox just defining the property background (or background-color).

But there are some ways around it and address the issue of background color:

• Insert the checkbox in a background color element.
• Create a pseudo-element with the appearance you are seeking.
• Hide input element and use one <label> coupled to the target element by means of the attribute for. So instead of styling the input, you define the style rules of <label>, in the same way as is possible style an input of the type file.

I usually use the third option when I need to style an element of that kind. You would need to change a little the marking you are doing, for this:

<div class='image-wrapper'>
  <input type='checkbox' id='foo'>
  <label for='foo'>✅</label>

  <img src='http://imgfoo.com/123.png'>
</div>

• In the id input, you can generate values in sequence, for example: imagem1, imagem2, imagem3... These values should be unique.
• In the for label, you will point to the id respective of each input.
• And in the src image you will leave as you are already doing by entering the image URL.

The result will be this:

.image-wrapper {
  position: relative;
  height: 300px;
  width: 500px
}

.image-wrapper img {
  width: 100%
}

.image-wrapper input {
  display: none
}

.image-wrapper label {
  background: #fff;
  color: #fff;
  padding: 2px 6px;
  position: absolute;
  right: 4%;
  top: 4%
}

.image-wrapper input:checked + label {
  background: red
}

<div class='image-wrapper'>
  <input type='checkbox' id='dog-img'>
  <label for='dog-img'>✅</label>

  <img src='http://i.stack.imgur.com/SXA8v.jpg'>
</div>

Answer 2

Before the line that returns the database image add the following html code:

<div class="check"><input type="checkbox" name="imgDb" value="imgDb" /></div>

being like this:

echo '<td>
        <a href="desceventos.php?$op='.$img.'" >
            <div class="check">
                <input type="checkbox" name="imgDb" value="imgDb" />
            </div>
            <img heigth="200" width="300" src="data:image;base64,'.$row[1].'" />
        </a>
        </td></tr><tr><td style="float:left,"</td>';

Also add this css:

td{position: absolute}
.check input[type="checkbox"]{
  position: relative;
  top: 20px;
  background: red;
}