Custom clickable ('checkbox') icon_问答_开发者

开发者 https://www.devze.com 2023-03-27 01:17 出处：网络

I am trying to create a mobile \'iPhone icon like\' image to behave like a checkbox. I want to be able to have an icon that is clickable on a mobile device (so click events don\'t work in this case).

I am trying to create a mobile 'iPhone icon like' image to behave like a checkbox. I want to be able to have an icon that is clickable on a mobile device (so click events don't work in this case). I am using jquery mobile as my platform but want to create these icons without its styling. The code I have here (off of stackoverflow) works on a computer browser but won't work on mobile 'touch' devices. I understand how to use all the CSS tools and making the images look different when the checked on or off is trigger. The problem is that I don't know what type of event to use in order for this to work based on touch with a mobile device. Does someone have an example or any suggestions that they could offer?

Thank You

<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/wheelChai开发者_高级运维r2.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>

So for people do not continue removing points and rating, I have made a new solution, more clear and more ninja css. Check the example 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>