javascript - CSS3 样式复选框

Question

我正在尝试使用纯 css3 获取下面的这个特定图像，

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

Answer 1

您可以查看jquery mobile 文档并尝试使用它，我认为学习它并不难。稍后我会给你一个演示，加油！

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

** 修改

​</p>