javascript - CSS3 スタイル チェックボックス

Question

純粋なcss3を使用して、以下のこの特定の画像にアクセスしようとしています.

仕組み: このアプリは、ページのトグル ボタンをオンにすると、チェック ボックスがアクティブになり、ユーザーは下の画像のようにボックスをオンまたはオフにできるように動作します。機能的には、アプリは完了しましたが、CSS の配置に問題があるため、下の画像のようになります。実際の例とこれまでの私の進捗状況については、これを参照してくださいhttp://jsfiddle.net/YGeZD/

Answer 1

私の唯一の解決策は、不透明度をゼロに設定してチェックボックスを非表示にし、次のように背景画像を含む要素を介して視覚的なオン/オフ状態を処理することです。

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

Answer 2

jquery モバイル ドキュメントを見て、いじってみてください。習得するのは難しくないと思います。後でデモをお見せします、応援してください!!!