Как интегрировать изображение внутри checkbox?

Я хочу поместить изображение внутри checkbox, но у меня нет идеи как делать это, я увидел проекты, но я не понимаю много

   
   
    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>
3
задан 03.02.2017, 19:31
0 ответов

Если идея состоит в том, чтобы выделять изображения, когда checkbox эта checked, смоги делать следующее:

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

Объяснение:

После того, как имели img внутри label, click что осуществляется на этой, распространяется в label.

Благодаря тому, что input он находится внутри label не необходимо использовать признак for чтобы говорить ему, что он присоединен в input.

Потом используя селектор прилегающих братьев (+) и psuedo-класс: checked мы можем создавать правило для того, чтобы:

"Когда input этот checked (а именно, 'img') применил что-то к прилегающему брату (input:checked + img)".

4
ответ дан 03.12.2019, 17:53

Я не понимаю того, что ты хочешь сделать, разместить изображение внутри или вместе с checkbox.

Но ты мог бы пробовать следующее с 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> 

Или немного с javascript и css

$(".checkbox").click(function(){
    $(this).toggleClass('checked')
});
.checkbox{
    width: 23px;
    height: 21px;
     background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
    background: transparent url(http://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>
0
ответ дан 03.12.2019, 17:53

checkbox если ты не можешь давать ему стиль.

Ты должен скрывать checkbox и присоединять ее (trigger) с элементом label и так мочь давать ему стиль:

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>
2
ответ дан 03.12.2019, 17:53