Question

我尝试了follow this，这对于背景图片替换和固定尺寸来说很好。但是如果图像具有动态高度，将内嵌图像作为图像替换呢？

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

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

input[type=checkbox] + label {
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label {
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0 0 0 0px;
}

寻找

的替代品

<label for="thing">
 <input type='checkbox' name='thing' value='valuable' id="thing"/>
 <img src="img.jpg" height="auto">
</label>

Answer 1

＆＃13;

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  border: 10px solid transparent;
  display: inline-block;
  font-size: 0;
  transition-duration: 0.4s;
}

input[type=checkbox]:checked + label {
  border-color: green;
}

＆＃13;

<input type='checkbox' name='thing' value='valuable' id="thing" />
<label for="thing"><img src="//lorempixel.com/200/100" alt="checkbox" /></label>

＆＃13;

Answer 2

如果我理解你的问题，我认为你可以直截了当地实现这个目标：

＆＃13;

$(document).ready(function(){
    $('input').each(function(){
        $(this).click(function(){
          alert('You clicked Checkbox ' + $(this).attr('name'));
        });
    });
});

＆＃13;

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: #999;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
}

input[type=checkbox]:checked + label {
  background: #0080FF;
  height: 16px;
  width: 16px;
  display:inline-block;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="thing1">
<input type="checkbox" name="thing1" id="thing1" value="valuable" />
<img src="http://placehold.it/16x16" />
</label>

<label for="thing2">
<input type="checkbox" name="thing2" id="thing2" value="valuable" />
<img src="http://placehold.it/24x24" />
</label> 

<label for="thing3">
<input type="checkbox" name="thing3" id="thing3" value="valuable" />
<img src="http://placehold.it/32x32" />
</label>

＆＃13;

Answer 3

这个技巧取决于：

for属性，以便<label>可以是<[=checkbox]>的扩展名，以便发生在标签上的任何事件也会发生在<[=checkbox]>。< / LI>
相邻的兄弟选择器+，它紧接着选择兄弟节点。在这种情况下：<[=checkbox]> + <label>
:checked伪类，它使<[=checkbox]>处于和/或影响两种不同的样式状态。

请注意，在代码段中，<img>可以是任意大小。

<强>段

.chx {
  display: none;
}
label {
  border: .5px inset #fefefe;
  border-radius: 100%;
  background: rgba(0, 0, 0, .1);
}
.chx:checked + label img {
  opacity: 1;
  transition: opacity 1.2s ease-in;
}
.chx + label img {
  opacity: 0;
  transition: opacity .9 ease-out;
}

<input id='chx1' class='chx' type='checkbox' checked>
<label for='chx1'>
  <img src='http://www.seaicons.com/wp-content/uploads/2016/11/Button-Blank-Green-icon.png' width='50'>
</label>
<input id='chx2' class='chx' type='checkbox' checked>
<label for='chx2'>
  <img src='http://www.freeiconspng.com/uploads/delete-button-png-24.png' width='128'>
</label>
<input id='chx3' class='chx' type='checkbox' checked>
<label for='chx3'>
  <img src='http://images.all-free-download.com/images/graphiclarge/round_yellow_play_button_4032.jpg' width='256'>
</label>

如何为复选框设置动态高度的内嵌图像替换？

3 个答案: