3

Quiero poner la imagen dentro de los checkbox pero no tengo idea de como hacerlo, vi proyectos pero no entiendo mucho

   
   
    textarea {
      width: 100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="thumbnail">
  <input type="checkbox"  id="thing_5">
  <label for="thing_5">
    <img src="http://cdn2.dibujos.net/dibujos/pintar/gorra-moderna-colorear.jpg">
  </label>
</div>
<div class="thumbnail">
  <input type="checkbox"  id="thing_6">
  <label for="thing_6">
    <img  src="http://cdn5.dibujos.net/dibujos/pintados/201137/3edb9367a26fe824c4a670e6367130c3.png">
  </label>
</div>


<textarea id='txtarea'></textarea>

0

3 respuestas 3

4

Si la idea es resaltar las imágenes cuando el checkbox esta checked, puede hacer lo siguiente:

.checkeable input {
  display: none;
}
.checkeable img {
  width: 100px;
  border: 5px solid transparent;
}
.checkeable input {
  display: none;
}
.checkeable input:checked  + img {
  border-color: blue;
}
<label class="checkeable">
  <input type="checkbox" name="cap1"/>
  <img src="http://www.primeskr.mx/wp-content/uploads/2014/10/cap-1_red.jpg"/>
</label>
<label class="checkeable">
  <input type="checkbox" name="cap2"/>
  <img src="http://inikweb.com/wp-content/uploads/2015/02/cap-1_black.jpg"/>
</label>

Explicación:

Al tener el img dentro del label, el click que se realiza sobre esta se propaga al label.

Debido a que el input se encuentra dentro del label no es necesario utilizar el atributo for para decirle que esta asociado al input.

Luego utilizando el selector de hermanos adyacentes(+) y la psuedo-clase :checked podemos crear una regla para que:

"Cuando el input este checked al hermano adyacente (es decir, el 'img') le aplique algo (input:checked + img)".

1
  • es justo lo que buscaba, me das una breve explicacion porfavor
    – hubman
    el 3 ene. 2017 a las 20:52
2

El checkbox en si no puedes darle estilo.

Tienes que ocultar el checkbox y asociarla (trigger) con el elemento label y así poder darle estilo:

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {  
  height: 50px;
  width: 50px;
  background-image: url('http://rndimg.com/ImageStore/OilPaintingBlue/50x50_OilPaintingBlue_6861436e56e047b38a2ffab1a3d29a4b.jpg');
  display: inline-block;
}

input[type=checkbox]:checked + label {
  background-image: url('http://rndimg.com/ImageStore/OilPaintingRed/50x50_OilPaintingRed_5cf3b97f37c34c85adf0bc7b7eb73a55.jpg');
}
<input id="checkbox" type="checkbox"/>
<label for="checkbox"></label>

0

No entiendo lo que quieres hacer, colocar la imagen dentro o junto al checkbox.

Pero podrías intentar lo siguiente con css:

input[type=checkbox] {
display:none;
}
 
input[type=checkbox] + label
{
background: url("https://image.freepik.com/free-icon/thumb-up-to-like-on-facebook_318-37196.jpg") no-repeat;
background-size: 50%;
height: 250px;
width: 250px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: url("http://icon-icons.com/icons2/936/PNG/512/thumb-down_icon-icons.com_73371.png") no-repeat;
background-size: 50%;
height: 250px;
width: 250px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

O algo con javascript y css

$(".checkbox").click(function(){
    $(this).toggleClass('checked')
});
.checkbox{
    width: 23px;
    height: 21px;
     background: transparent url(https://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
    background: transparent url(https://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.