CSS3样式复选框

Question

我正在尝试使用纯css3到达下面的特定图片，

工作原理：应用程序的工作方式是，一旦打开页面上的切换按钮，复选框就会被激活，用户可以选中或取消选中框，就像下图所示。功能明智，应用程序已完成，但我遇到问题是将CSS对齐，所以它看起来像下面的图像。请参考这个作为一个工作实例和迄今为止我的进展http://jsfiddle.net/YGeZD/

Answer 1

你可以看到jquery mobile document并尝试使用它我认为学习它并不难。我稍后会给你一个演示，欢呼!!!

Answer 2

我唯一的解决方案是隐藏复选框，方法是将其不透明度设置为零，然后通过带有背景图像的元素处理视觉开/关状态，如下所示：

<div class="checkbox_frame">
 <input type="checkbox" value="None" />
 <span class="state"></span>
</div>

CSS：

.checkbox_frame {
position: relative;
}

input[type="checkbox"] {
width: 30px; height: 30px;
position: absolute;
opacity: 0;
}

input[type="checkbox"] + .state {
display: block;
width: 30px; 
height: 30px;
background: url('http://i153.photobucket.com/albums/s229/fluffyshuffle/error1.png') center center no-repeat;
}

input[type="checkbox"]:checked + .state {
background: url('http://i153.photobucket.com/albums/s229/fluffyshuffle/tick1.png') center center no-repeat;
}

**修订