Question

我已经添加了CSS来自定义我的复选标记框上的图像，当点击它时，它应该显示带有复选标记的图像。但是经过测试它不起作用。

我使用了此 stack overflow中的CSS和HTML来实现多对复选框的自定义图像。 Sprite的每个图标高度为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>

Updated fiddle

Answer 1

我把它弄清楚了，似乎当我默认回原始代码然后添加自定义图像以便检查标记一切正常。所以我假设我搞砸了一些代码。

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

无法使复选框自定义图像显示复选标记

1 个答案: