Custom clickable ('checkbox') icon
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>
加载中,请稍侯......
精彩评论