Question

我正在尝试创建一个像'图像一样的移动'iPhone图标，表现得像一个复选框。我希望能够拥有一个可在移动设备上点击的图标（因此在这种情况下点击事件不起作用）。我使用jquery mobile作为我的平台，但想要创建这些图标而不用它的样式。我在这里的代码（在stackoverflow之外）可以在计算机浏览器上运行，但不适用于移动“触摸”设备。我了解如何使用所有CSS工具，并在触发检查或关闭时使图像看起来不同。问题是我不知道使用什么类型的事件来使其基于触摸移动设备而工作。有人有他们可以提供的例子或任何建议吗？

谢谢

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

 input[type=checkbox] + label
 {
  background-image: url('pictures/wheelChair.png');
  height: 130px;
  width: 130px;
  display:inline-block;
  padding: 0 0 0 0px;
 }

 input[type=checkbox]:checked + label
  {
  background-image: url('pictures/wheelChair2.png');
  height: 130px;
  width: 130px;
  display:inline-block;
  padding: 0 0 0 0px;
   }

      </style>

 </head>
 <body>

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

Answer 1

因此，对于人们不继续删除积分和评级，我已经做了一个新的解决方案，更清晰，更忍者css。查看示例HERE

input[type="checkbox"]{
  display:none;
}
input[type="checkbox"]+label{
  cursor:pointer;
  text-indent:22px;
  display:block;
  height:22px;
  position:relative;
}
input[type="checkbox"] + label:after{
  background: url('http://www.dailycoding.com/Uploads/2008/12/CheckBox.png') no-repeat -21px 0px;
  display:block;
  width:21px;
  content:"";
  position:absolute;
  top:0px;
  left:0px;
  height:21px;
}
input[type="checkbox"]:checked+label:after{
    background-position:0px 0px;
}

FOR

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

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

自定义可点击（'复选框'）图标

1 个答案: