How to make a checkbox in the corner of an image?

Question

How to make a checkbox in the corner of an image?

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

I'm doing work for school in php, css ... And I wonder if it's possible to put checkboxes into images that come from the database. I would 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 a time

] 1

php html css

asked by anonymous 05.04.2016 / 23:37

2 answers

Singleton pattern for communication with database Format query in linq to send to the ViewBag

score 3 · Answer 1

Before responding to what was asked, a note: it is not possible to style a% of type checkbox just by setting the input (or background ) property.

But there are some ways to work around this and address the background color issue:

Insert the checkbox into an element that has background color.
Create a pseudo-element with the look you're looking for.
Hide the input element and use a background-color attached to the target element, using the <label> attribute. So, instead of styling for , you set the style rules of input , just as you can stylize an input of type <label> .

I usually use the third option when styling an element of this type. You would need to change the markup 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%% of input, you can generate values in sequence, for example: image1, image2, image3 ... These values must be unique.
In%% of the label, you will point to the respective file of each input.
And in%% of the image you will leave as you already do by entering the URL of the image.

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>

score 1 · Answer 2

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

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

It looks 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;
}