CSS3_html/css_WEB-ITnose に基づくカスタム美化チェックボックスの組み合わせ

今日は、非常に美しい CSS3 カスタム チェックボックスのセットを共有します。各チェックボックスには独自の特徴があります。選択するとアニメーション効果を持つチェックボックスがいくつかあります。これは、CSS3 カスタム美化チェックボックスの非常に優れた組み合わせです。さらに、以前共有したラジオ ボタンとチェック ボックスの美化バージョンの jQuery 実装も非常に優れています。

オンライン プレビュー ソース コードのダウンロード

実装されたコード:

 <div class="container">            <div class="holder">                <div class="center" style="width: 186px;">                    <input type="checkbox" id="checkbox-1-1" /><label for="checkbox-1-1"></label>                    <input type="checkbox" id="checkbox-1-2" checked /><label for="checkbox-1-2"></label>                    <input type="checkbox" id="checkbox-1-3" /><label for="checkbox-1-3"></label>                </div>            </div>            <div class="holder" style="background: #473C33;">                <div class="center" style="width: 269px;">                    <input type="checkbox" id="checkbox-2-1" /><label for="checkbox-2-1">I AGREE</label>                </div>            </div>            <div class="holder" style="background: #fff;">                <div class="center" style="width: 186px;">                    <input type="checkbox" id="checkbox-3-1" /><label for="checkbox-3-1"></label>                    <input type="checkbox" id="checkbox-3-2" checked /><label for="checkbox-3-2"></label>                    <input type="checkbox" id="checkbox-3-3" /><label for="checkbox-3-3"></label>                </div>            </div>            <div class="holder" style="background: #FFAE94;">                <div class="center" style="width: 193px;">                    <input type="checkbox" id="checkbox-4-1" /><label for="checkbox-4-1"></label>                    <input type="checkbox" id="checkbox-4-2" /><label for="checkbox-4-2"></label>                    <input type="checkbox" id="checkbox-4-3" checked /><label for="checkbox-4-3"></label>                </div>            </div>            <div class="holder" style="background: #5FA6D6;">                <div class="center" style="width: 180px;">                    <input type="checkbox" id="checkbox-5-1" checked /><label for="checkbox-5-1"></label>                    <input type="checkbox" id="checkbox-5-2" /><label for="checkbox-5-2"></label>                    <input type="checkbox" id="checkbox-5-3" /><label for="checkbox-5-3"></label>                </div>            </div>            <div class="holder" style="background: #AECFE5;">                <div class="center" style="width: 265px;">                    <input type="checkbox" id="checkbox-6-1" /><label for="checkbox-6-1"></label>                    <input type="checkbox" id="checkbox-6-2" /><label for="checkbox-6-2"></label>                    <input type="checkbox" id="checkbox-6-3" /><label for="checkbox-6-3"></label>                    <input type="checkbox" id="checkbox-6-4" checked /><label for="checkbox-6-4"></label>                </div>            </div>            <div class="holder" style="background: #33444E;">                <div class="center" style="width: 467px;">                    <input type="checkbox" id="checkbox-7-1" /><label for="checkbox-7-1"><span>AGREE</span></label>                    <input type="checkbox" id="checkbox-7-2" /><label for="checkbox-7-2"><span>BUY</span></label>                    <input type="checkbox" id="checkbox-7-3" checked /><label for="checkbox-7-3"><span>SELL</span></label>                    <input type="checkbox" id="checkbox-7-4" /><label for="checkbox-7-4"><span>OKAY</span></label>                </div>            </div>            <div class="holder" style="background: #EDFFFB;">                <div class="center" style="width: 361px;">                    <input type="checkbox" id="checkbox-8-1" /><label for="checkbox-8-1"></label>                    <input type="checkbox" id="checkbox-8-2" checked /><label for="checkbox-8-2"></label>                    <input type="checkbox" id="checkbox-8-3" /><label for="checkbox-8-3"></label>                    <input type="checkbox" id="checkbox-8-4" /><label for="checkbox-8-4"></label>                </div>            </div>            <div class="holder" style="background: #A0DAB0;">                <div class="center" style="width: 383px;">                    <input type="checkbox" id="checkbox-9-1" /><label for="checkbox-9-1"></label>                    <input type="checkbox" id="checkbox-9-2" checked /><label for="checkbox-9-2"></label>                    <input type="checkbox" id="checkbox-9-3" /><label for="checkbox-9-3"></label>                    <input type="checkbox" id="checkbox-9-4" /><label for="checkbox-9-4"></label>                </div>            </div>            <div class="holder" style="background: white;">                <div class="center" style="width: 180px;">                    <input type="checkbox" id="checkbox-10-1" /><label for="checkbox-10-1"></label>                    <input type="checkbox" id="checkbox-10-2" checked /><label for="checkbox-10-2"></label>                </div>            </div>            <div class="holder" style="background: #E8EDF0;">                <div class="center" style="width: 211px;">                    <input type="checkbox" id="checkbox-11-1" /><label for="checkbox-11-1"></label>                    <input type="checkbox" id="checkbox-11-2" checked /><label for="checkbox-11-2"></label>                </div>            </div>        </div>

via: http://www.w2bc.com/Article/31234