不能使复选框自定义图像显示复选标记

Can't make checkbox custom image show check mark

本文关键字：显示 图像 复选框 自定义 不能      更新时间：2023-09-26

我已经添加了CSS来定制我的复选框上的图像，当点击它应该显示带有复选标记的图像。然而，经过测试，它不工作。

我使用这个堆栈溢出的CSS和HTML来实现多对复选框的自定义图像。雪碧的每个图标都堆叠在50像素的高度。

不是100%确定我哪里错了，使它不工作，我的代码可能有什么问题，不使复选框选中和取消选中?

小提琴

<html><head>
    <style>
        @font-face {
    font-family: 'Scribble Box'; /*a name to be used later*/
    src: url('/scribbleboxdemo.ttf'); /*URL to font*/
}
        .scribblebox{
    font-family: 'Scribble Box';
    font-size: 50px;
}
.overlay {
  display: none;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #8AC007;
  padding: 10px;
}
#map {
  position: relative;
  /*right: -780px; removed for demo purposes */
  width: 452px;
  height: 344px; 
    float: left;
  background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
  top: 8%; /* whatever you like */
  left: 5%; /* whatever you like */
  position: absolute;
}
#station_B {
  top: 45%; /* whatever you like */
  left: 15%; /* whatever you like */
  position: absolute
}
        #station_C{
  top: 8%; /* whatever you like */
  left: 5%; /* whatever you like */
  position: absolute;
}
.hover {
  color: green
}
        #wrapper {
  width:4000px;
  clear:both;
}
#first {
  border: 3px solid black;
  width:300px;
  float:left;
}
#second {
  border: 3px solid black;
  width:300px;
  float:left;
}
#third {
  border: 3px solid black;
  width:200px;
  float:left;
}
input[type=checkbox]{  display:none; }
input[type=checkbox] + label{
    background-image: url('/checkmarkboxes.png');
    display: block;
    height: 50px;
    padding: 0;
    width: 48px; }

#lightblue + #lightblue_s{ background-position: 0 50; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }
</style>

<div id="wrapper">
<div id="map">
  <span id="station_A" class="overlay"><img src="/Bandana_top.png" /></span>
  <span id="station_B" class="overlay">Highlight image here.</span>
  <span id="station_C" class="overlay"><img src="Bandana_top.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#8fc0ff"></span>
</div>
<p>
            <div id="first">
            <h2>
                Choose a Color
            </h2>
             <input type='checkbox' name='methods' value='valuable' id="lightblue"/><label id="lightblue_s" for="lightblue"></label>
    </div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>'
  <script type="text/javascript" src="common.js"></script>
  <script type="text/javascript" src="paintbrush.js"></script>
  <script>
 $(document).ready(function() {
   $("input[type='checkbox']").change(function() {
     var state = $(this).val();
     $("#" + state).toggleClass("overlay");
   });
   $('#checkbox1').change(function() {
     if (this.checked) $('#map').fadeIn('slow');
     else $('#map').fadeOut('slow');
   });
 });
    </script>

更新的小提琴

我弄清楚了，似乎当我默认回到原始代码，然后添加自定义图像在复选标记一切工作。所以我想我把代码弄乱了。

<style>
    .overlay {
  display: none;
}
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #8AC007;
  padding: 10px;
}
#map {
  position: relative;
  /*right: -780px; removed for demo purposes */
  width: 452px;
  height: 344px; 
  background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
  top: 8%; /* whatever you like */
  left: 5%; /* whatever you like */
  position: absolute;
}
#station_B {
  top: 45%; /* whatever you like */
  left: 15%; /* whatever you like */
  position: absolute
}
.hover {
  color: green
}
    input[type=checkbox]{  display:none; }
input[type=checkbox] + label{
    background-image: url('checkmarkboxes.png');
    display: block;
    height: 50px;
    padding: 0;
    width: 48px; }
#lightblue + #lightblue_s{ background-position: 0 0; }
#lightblue:checked + #lightblue_s{ background-position: 0 -50px; }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
  <span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
  <span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
  <h2>Choose a Shirt</h2>
  <form>
    <input type="checkbox" name="image" value="station_A" id="lightblue"><label id="lightblue_S" for="lightblue"></label>
    <br>
    <input type="checkbox" name="image" value="station_B">Station Beta
    <input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
  </form>
</p>
<script>
    $(document).ready(function() {
   $("input[type='checkbox']").change(function() {
     var state = $(this).val();
     $("#" + state).toggleClass("overlay");
   });
   $('#checkbox1').change(function() {
     if (this.checked) $('#map').fadeIn('slow');
     else $('#map').fadeOut('slow');
   });
 });
</script>

& lt;

相关文章：