自定义可点击("复选框")图标

我试图创建一个移动'iPhone图标像'图像行为像一个复选框。我希望能够有一个图标，是可点击的移动设备(所以点击事件不工作在这种情况下)。我使用jquery移动作为我的平台，但想创建这些图标没有它的样式。我在这里的代码(关闭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>

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

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

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

相关内容

最新更新

热门标签：