CSS3样式复选框

我试图让这一特定图像的下方采用纯CSS3， enter image description here CSS3样式复选框

工作原理：应用程序以这样的方式工作，一旦页面上的切换按钮接通，检查盒子被激活，用户可以像下面的图片一样检查或取消选择框。功能方面，应用程序已完成，但有问题的CSS对齐，因此它可以看起来像下面的图像。请好好参考一下这个工作示例和目前为止的进展情况http://jsfiddle.net/YGeZD/

来源

2012-07-16 Apulo Ohale Cosmas Lite

你为什么不使用jQuery米obile？我认为这很好。 – 2012-07-16 04:06:25

嗨Bunlong我不太熟悉Jquery，这就是为什么我必须使用CSS。你可以点亮一下，或者帮我解决这个问题。谢谢 – 2012-07-16 04:12:16

我对你唯一的解决办法是通过其不透明度设置为零隐藏的复选框，然后与背景图像处理您的开/关状态可视化，通过一个元素，如下所示：

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

**修订

来源

2012-07-16 05:54:20

嗨肖恩，我已经相应地添加了上述代码，但仍然无法正常工作。我刚刚更新了另一个jsfiddle，向您显示当前编辑的版本和您给我的代码。 http://jsfiddle.net/DauhQ/我将off.png和on.png更改为链接。如果你不介意，给我发送正确的版本使用jsfiddle.net谢谢 – 2012-07-16 06:51:21

嗨Apulo，也许这会让你在正确的轨道上：http://jsfiddle.net/DauhQ/3/ – 2012-07-16 07:10:16

谢谢Shawn Wernig，你是男人，我很高兴它的工作正常。 – 2012-07-16 07:22:43

你可以看到jquery mobile document并试着玩弄它我认为这并不难学。我会在稍后给你演示，欢呼！

来源

2012-07-16 04:21:36

谢谢Bunlong，我会等待的。我仍然试图找到我的方式绕过JQuery的移动文档.. – 2012-07-16 04:23:30

CSS3样式复选框

回答

相关问题