1

Eu estou a realizar um trabalho para a escola em php, css... E gostaria de saber se é possível colocar checkboxes em imagens que vem da base de dados. Eu gostaria de colocar as checkboxes (em vermelho) como se encontram na imagem anexada. Isto é para facilitar apagar mais que um "evento" ao mesmo tempo

![Resultado esperado]1

Meu código

1
  • Por favor, marque minha resposta como aceita, se o código funcionou :) 6/04/2016 às 3:05

2 Respostas 2

4

Antes de responder ao que foi perguntado, uma observação: não é possível estilizar um input do tipo checkbox apenas definindo a propriedade background (ou background-color).

Porém existem algumas formas de contornar isso e tratar a questão da cor de fundo:

  • Inserir o checkbox em um elemento que possui cor de fundo.
  • Criar um pseudo-elemento com a aparência que está buscando.
  • Esconder o elemento de entrada e usar um <label> atrelado ao elemento alvo, por meio do atributo for. Assim, ao invés de estilizar o input, você define as regras de estilo do <label>, da mesma forma que é possível estilizar um input do tipo file.

Eu costumo utilizar a terceira opção quando preciso estilizar um elemento desse tipo. Você precisaria alterar um pouco a marcação que está fazendo, para isto:

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

  <img src='http://imgfoo.com/123.png'>
</div>
  • No id do input, você pode ir gerando valores em sequência, por exemplo: imagem1, imagem2, imagem3... Estes valores devem ser únicos.
  • No for do label, você apontará para o id respectivo de cada input.
  • E no src da imagem você deixará como já está fazendo, inserindo a URL da imagem.

O resultado será esse:

.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='https://i.stack.imgur.com/SXA8v.jpg'>
</div>

1

Antes da linha que retorna a imagem do banco de dados adicione o seguinte código html:

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

ficando assim:

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

Adicione também este css:

td{position: absolute}
.check input[type="checkbox"]{
  position: relative;
  top: 20px;
  background: red;
}
1
  • Isto: background: red; não funciona para checkbox. 8/04/2016 às 10:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .